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 >
  <a href="#">Transition button</a>
</div>

CodePudding user response：

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.

CodePudding user response：

Just set top: 0 in .intro a initially