Difficulty with CSS Transition and Box Shadow at the Top

The

element can have a box-shadow that is blurred and lightblue, with the option to add an inset parameter. For example, the code would be:
div {
box-shadow: 10px 10px 5px lightblue inset;
}
You can also add multiple shadows to an element by specifying the values for each shadow. For instance:
div {
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
To create paper-like cards, you can use the property. Alternatively, if you want to disable the transition property and just keep the transform, you can use Solution 3. However, it is unclear what the desired outcome is.

Question:

I attempted to include a
smooth transition
to the button when it is clicked or hovered over, however, my efforts were unsuccessful. I experimented with both

transition: all .5s ease-in-out;

and

transition: top .5s ease-in-out;

but they did not yield the desired outcome. The reason for the malfunction is unclear to me.

.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;
}

Transition button


Solution 1:


For the transition to work, it is necessary to assign an initial value to

top: 0

in

.intro a

.

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;
}

This blog post aims to enhance your comprehension of 3D buttons.


Solution 2:


Initially, place

top: 0

within

.intro a

.

Frequently Asked Questions

Posted in Css