CODEWITHSUNDEEP
htmlcss
user10244268
user10244268

Reputation:

CSS/HTML button is not animating correctly

This CSS/HTML button has the exact same code as another HTML button that works correctly. It is supposed to translate 4 pixels down. The other HTML button does exactly this and despite having the exact same code the button's shadow decides to move upwards.

.back {
    font-size: 28px;
    color: #ecf0f1;
    text-decoration: none;
    border-radius: 5px;
    border: solid 1px #f39c12;
    background: #e67e22;
    text-align: center;
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    transition: all 0.1s;
    -webkit-box-shadow: 0px 6px 0px #d35400;
    -moz-box-shadow: 0px 6px 0px #d35400;
    box-shadow: 0px 6px 0px #d35400;
    font-family: "Futura";
    margin: -20px -50px;
    position: relative;
    top: 50%;
    left: 50%;
}

.back:hover {
    background: #ffad66;
    color: #ffffff;
    -webkit-box-shadow: 0px 6px 0px #e07f43;
    -moz-box-shadow: 0px 6px 0px #e07f43;
    box-shadow: 0px 6px 0px #e07f43;
}

.back:active {
    -webkit-box-shadow: 0px 2px 0px #d35400;
    -moz-box-shadow: 0px 2px 0px #d35400;
    box-shadow: 0px 2px 0px #d35400;
    transform: translateY(4px);
}

Upvotes: 1

Views: 53

Answers (1)

Dacre Denny
Dacre Denny

Reputation: 30360

This is likely due to the default display:inline CSS rule that is applied to<a> elements. This will affect the vertical placement and animation behaviour of your button.

Try adding the following to your CSS: display:inline-block;

This will override the default display:inline of your back link, and should achieve the desired result:

.back {
    font-size: 28px;
    color: #ecf0f1;
    text-decoration: none;
    border-radius: 5px;
    border: solid 1px #f39c12;
    background: #e67e22;
    text-align: center;
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    transition: all 0.1s;
    -webkit-box-shadow: 0px 6px 0px #d35400;
    -moz-box-shadow: 0px 6px 0px #d35400;
    box-shadow: 0px 6px 0px #d35400;
    font-family: "Futura";
    margin: -20px -50px;
    position: relative;
    top: 50%;
    left: 50%;
    /* Add rule to specify inline-block display behavior */
    display: inline-block;
}

Alternatively, you can just use a <button> tag instead of a <a> tag. Using the button tag will mean that your original CSS will work as expected without the need for the update suggested in this answer:

<!-- 
Old approach
<a class="back">Test</a> 
-->

<!-- Alternative approach -->
<button class="back">Test</button>

Upvotes: 1

Related Questions