Issue
I'm trying to add a smooth transition on the button on hover and click but it doesn't work. Tried transition: all .5s ease-in-out;
, transition: top .5s ease-in-out;
but no bueno. I'm not sure why it doesn't work.
.intro a {
color: white;
font-size: 2em;
text-align: center;
text-decoration: none;
background-color: #ffcc00;
display: block;
position: relative;
padding: 20px 40px;
border-radius: 30px;
width: max-content;
padding: 20px 70px;
margin: 0 auto;
text-shadow: 0px 1px 0px #000;
filter: dropshadow(color=#000, offx=0px, offy=1px);
box-shadow: inset 0 1px 0 #ffe5c4, 0 10px 0 #cf920f;
}
.intro a:hover {
top: 10px;
background-color: #F78900;
box-shadow: inset 0 1px 0 #ffe5c4, inset 0 -3px 0 #cf920f;
}
<div class="intro">
<a href="#">Transition button</a>
</div>
Solution
You need to set top: 0
initially in .intro a
because transition only works if you have a initial value (in your case).
I created a simple example for you.
@import "https://cdn.jsdelivr.net/gh/KunalTanwar/normalize/css/normalize.inter.min.css";
body {
height: 100%;
display: grid;
place-items: center;
}
button {
top: 0;
border: 0;
color: white;
font-size: 2rem;
background: none;
padding: 1rem 2rem;
border-radius: 1.5rem;
background-color: red;
box-shadow: 0 10px 0 0 #cc0000;
transition: all 250ms ease;
}
button:hover {
top: 10px;
box-shadow: 0 0 0 0 transparent;
}
<button>
Hover Me!
</button>
Also this blog post will help you to understand more about 3d buttons.
Answered By - Kunal Tanwar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.