The animation of the CSS/HTML button is malfunctioning

I have encountered an issue with this CSS/HTML button. Despite having the exact same code as another HTML button that functions correctly, this button's shadow moves upwards instead of translating 4 pixels down like it is supposed to.

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

Answer №1

One reason for this issue could be the default display:inline CSS rule that is attached to <a> elements. This can impact both the vertical alignment and animation behavior of your button.

To fix this, you can try including the following line in your CSS: display:inline-block;

By adding this code, it will overwrite the default display:inline setting for your back link, ultimately achieving the desired outcome:

.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 have the option to utilize a <button> tag instead of an <a> tag. Using the button tag will allow your original CSS styling to function correctly without needing the adjustments outlined in this solution:

<!-- 
Previous method
<a class="back">Test</a> 
-->

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Challenges encountered when converting Javascript into a Django template

I am facing a challenge with converting an HTML file into a Django template. It appears that the main.js file is not functioning properly, yet there are no errors being displayed in the debug console. I recently transferred the files from my local filesys ...

javascriptpythonjquerycssdjango

Newbie seeking assistance: Troubleshooting Nodejs error - ENOENT: no file or directory found. Can someone please help?

I attempted to follow an online course on YouTube, mirroring the steps of the instructor. When I encountered an error, I diligently re-watched the video segment multiple times, searched for solutions on Google, and read through numerous similar problems on ...

javascripthtmlcssnode.js

Designing a Curved Stepper Component in the Shape of an S

I've been attempting to create a custom stepper component with an S-curve shape using React, but so far I haven't been successful. I even tried utilizing the MUI Stepper component and experimented with pure HTML and CSS, but couldn't achieve ...

javascripthtmlcssmaterial-uistepper

Hey there, I was wondering if it's possible to modify the color of the navbar when scrolling on a specific page

After the first 3 pages with a black background and a transparent navbar with white navigation items, I encounter visibility issues when scrolling to the colorful 4th page. Is there a way to change the navbar color on this specific page using ONLY HTML a ...

htmlcsscolorsresponsive-designnavbar

Updating a URL in an HTML form with JavaScript

Currently, I am faced with the task of manipulating a variable's value in a JS file within a function that is responsible for dynamically updating values in an HTML table without necessitating a full website reload. The function code snippet appears b ...

javascriptphphtmldom

What modifications can I make to my JavaScript code in order to enable clicking through an HTML list?

I'm facing an issue with getting my list to function properly. I want users to be able to navigate through the list by clicking on next and previous buttons, but for some reason, the code is not working as expected. When they click next, the next item ...

javascriptjqueryhtmllist

css Issue with the "left" property

Is it possible to center the left side (left border) of a child div within its parent div? I tried using left: 50% in the CSS for the child div, but it doesn't seem to be working. Can anyone explain why? <div id="outher"> <div id="inner ...

htmlcsspositioning

Sass error: Unable to locate the stylesheet for import while trying to import bootstrap

I am currently working on integrating bootstrap into my project directory using npm. Below is an overview of my file structure: https://i.sstatic.net/HjExY.png Within my style.scss file, I am utilizing the @import feature to include Bootstrap as follows: ...

cssimportsassbootstrap-5

Create an HTML element that has a 'floating' effect

Is it possible to have an HTML element like a span or div on the page that occupies no space? I want to be able to toggle its visibility without affecting the layout, such as having a label appear next to a table row when hovered over without taking up e ...

htmlcss

Element that appears to be hidden

Looking to add a unique touch with a "chat bubble" design on my webpage. Below is the code I have so far, but I seem to be facing issues with getting the triangle shape to display. Any suggestions on what might be causing this problem? .playernamechat ...

htmlcsspseudo-element

Update the menu-link class to active for a single-page website

Currently, I have a one-page website that serves as a portfolio. The website features a menu at the top with links that direct visitors to specific sections of the page using # as links. I am looking to enhance the user experience by implementing a functi ...

jqueryhtmlcss

Background Image Division (Twitter Bootstrap)

I am facing a challenge while creating a module with a span8 width and varying height. The div contains an image that dictates its height, with text overlaid on the image. My issue lies in preventing part of the image from getting cropped when Bootstrap re ...

htmlcsstwitter-bootstrapresponsive-design

Adjusting the width of row items in Angular by modifying the CSS styles

I am envisioning a horizontal bar with items that are all the same width and evenly spaced apart. They can expand vertically as needed. Check out the updated version here on StackBlitz https://i.sstatic.net/MFfXd.png Issue: I am struggling to automatica ...

cssangulartypescript

Tips for altering the text color of the highlighted row in a Material UI table

Trying to modify the color of the row text and the background color when selected. I have managed to adjust the background color, but I am encountering difficulty changing the text color. <TableRow className={classes.tableBody} > tab ...

cssreactjsmaterial-uifrontend

There is a hidden delete button obscured by another element. What steps can be taken to bring that element to the forefront and make it visible?

I'm having trouble positioning a delete button in the top right corner of a collapsible box. Despite setting it to `visibility: visible`, I can't seem to get it to display at the top of the collapsible element. Any suggestions or ideas would be g ...

javascriptjqueryhtmlcss

Add a new class to an element located in a separate div using JavaScript

$(document).ready(function() { $('.btn').click(function() { $(this).parent().addClass('show'); }); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div clas ...

javascriptjqueryhtmlcss

Step-by-step guide for dynamically including dropdown options

Is there a way to dynamically add a dropdown using JavaScript? I currently have a dropdown with numbers that creates another dropdown when selected. However, I want to add the dynamic dropdown through JavaScript. How can I achieve this? Below is the PHP ...

phpjavascripthtml

Node.js Alternative to HTML5 FileReader: Using 'fs' Module

I attempted to perform file reading and writing operations using JavaScript, but encountered issues with Node.js' 'fs'. After some research, I found that there are equivalent HTML5 APIs available. Is there a comparable method in the HTML5 F ...

javascripthtmlfilereaderhtml5-filesystem

Dynamic scaling and positioning of multiple images in relation to each other using CSS

I am currently working on layering images over a large logo and making sure it remains responsive. I want the overlaid images to maintain their position on the logo even when the browser window size is reduced. Here is what my current browser display look ...

htmlcssresponsive-design

Tips for formatting JSON using jQuery

Imagine my JSON data with 3 different sets of information: [ { "Pair":"", "Id":"8ca2df56-2523-4bc3-a648-61ec4debcaaf", "PubDate":"/Date(1463775846000)/", "Provider":null, "Market":"" }, { "Pair":"", ...

javascriptjqueryhtmlcssjson