CSS Button Animation getting bigger - html

Question

I have created a button in html/less and when you hover over the button, the button will become bigger. At the moment it's very sloppy. Right when you hover over the button it gets to the bigger size, but I want it to be slower and have an animation kinda look.
Here is my code for the button in HTML and LESS:
HTML:
<div id="buttons">
dance
</div>
CSS
.btn {
border-radius: 5px;
padding: 15px 55px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}
.green {
background-color: #d7d7d7;
box-shadow: 3px 5px 5px #888888;
border-radius: 2px;
}
.green:hover {
background-color: #000;
/* Making button bigger on hover */
padding: 20px 60px;
}
So how can I get my button become bigger slower and have a kinda animation look?

Answer 1

Simply use transition for the element which you want to make effect on it, also if you want to scale it you can use transform: scale() with perspective(10px) to prevent the blurry effect on :hover event https://jsfiddle.net/7tvvmrcf/
.btn {
border-radius: 5px;
padding: 15px 55px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}
.green {
background-color: #d7d7d7;
box-shadow: 3px 5px 5px #888888;
border-radius: 2px;
transition: all 1s ease;
transform: scale(1);
}
.green:hover {
background-color: #000;
/* Making button bigger on hover */
transform: scale(1.5) perspective(1px)
}
<div id="buttons">
dance
</div>

Answer 2

You can use scaling for this. Put transition: all .5s ease-in-out; in the .green css for the slow animation and put transform: scale(1.1); in the .green:hover css for resizing the button. It will look like this:
.btn {
border-radius: 5px;
padding: 15px 55px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}
.green {
background-color: #d7d7d7;
box-shadow: 3px 5px 5px #888888;
border-radius: 2px;
transition: all .5s ease-in-out;
}
.green:hover {
background-color: #000;
/* Making button bigger on hover */
padding: 20px 60px;
transform: scale(1.1);
}
<div id="buttons">
Dance
</div>

Answer 3

This is kind of a hack where when you hover over the button, and it gets bigger or smaller without transition:
.wallpaper{
height: 200px;
width: 200px;
background-color:#F5F5F5
}
.smileyStyle{
height: 50px;
width: 50px;
border-radius: 50%;
margin-left: 10px;
border: 3px solid #F5F5F5;
}
.smileyStyle:hover{
border: none;
}
<div class="wallpaper">
<button class="smileyStyle"> :)</button>
</div>

Answer 4

Based on your existing code and the information you give, it looks like simply adding transition: transform,padding .5s; to your .btn selector would do the job.
I usually prefer to be specific about the properties that will be taken into account by the transition to avoid changing something unwanted because of the cascade.
.btn {
[…]
transition: transform, padding .5s;
}
.btn {
border-radius: 5px;
padding: 15px 55px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
transition: transform, padding .5s;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}
.green {
background-color: #d7d7d7;
box-shadow: 3px 5px 5px #888888;
border-radius: 2px;
}
.green:hover {
background-color: #000;
/* Making button bigger on hover */
padding: 20px 60px;
}
<div id="buttons">
dance
</div>