CSS/HTML button is not animating correctly

Question

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

Can you provide the HTML, including the button that works as expected, and the button that does not? — Dacre Denny
– Dacre Denny, Commented Sep 21, 2018 at 0:35
<a href="google.com" class="back">Back</a> is the button that doesn't work, <input class="submit" type="submit" name="orderbtn" value="Order"></input> is the button that does. Both buttons have the exact same style coding posted originally, with the exception of different class names. — user10244268
– user10244268, Commented Sep 21, 2018 at 0:40
I've created the following jsFiddle - is this functioning as expected? jsfiddle.net/6bxjq7og/1 — Dacre Denny
– Dacre Denny, Commented Sep 21, 2018 at 0:41
Yes, although I copied the code and the problem still persisted. I figured it out though, I just made a button tag around the link tag and made the button a part of the class. Thank you. — user10244268
– user10244268, Commented Sep 21, 2018 at 0:45
you're welcome - I just provided an answer that may be a better fit for your project, which means you need not replace your link tag with the button alternative. — Dacre Denny
– Dacre Denny, Commented Sep 21, 2018 at 0:47

sheeldotme · Accepted Answer · 2018-09-21 01:04:59Z

1

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>

edited Sep 21, 2018 at 1:04

sheeldotme

2,5731 gold badge17 silver badges30 bronze badges

answered Sep 21, 2018 at 0:44

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user10244268 Over a year ago

Thank you. However, I fixed the problem by creating a button tag around the anchor element, and made the class of the button .back. I will take what you said into consideration in the future though, as it could solve some problems.

Dacre Denny Over a year ago

@Gabe_0 please see updated answer, does this work for you?

Collectives™ on Stack Overflow

CSS/HTML button is not animating correctly

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related