Troubleshooting: CSS button animation not functioning

Attempting to create a hover animation for buttons on my webpage, I crafted the following CSS code:

#B1 {
  margin: 50px;
  margin-top: 50px;
  margin-bottom: 50px;
  flex: 1 1 auto;
  padding: 20px;
  border: 2px solid #f7f7f7;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow:hidden;
  transition: .3s;
  &:after {
    position: absolute;
    transition: .3s;
    content: '';
    width: 0;
    left: 50%;
    bottom: 0;
    height: 3px;
    background: #f7f7f7;
  }
}

The intended animation was meant to display a small bar at the bottom of buttons within the black div section towards the bottom of the page. However, the animation isn't functioning properly. What could be causing this issue?

https://codepen.io/Feners4/pen/KggAwg

javascripthtmlcss

Answer №1

To ensure the bar is displayed when hovering over the element, it is important to specify a width.

Utilize the following CSS code for the desired outcome:


#B1 {
  margin: 50px;
  margin-top: 50px;
  margin-bottom: 50px;
  flex: 1 1 auto;
  padding: 20px;
  border: 2px solid #f7f7f7;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow:hidden;
  transition: .3s;
  &:after {
    position: absolute;
    transition: .3s;
    content: '';
    width: 0;
    left: 0;
    bottom: 0;
    height: 3px;
    background: #f7f7f7;
  }
}

#B1:hover::after {
    width:100%
 }

#B2:hover::after {
    width:100%
 }

View demo here: https://codepen.io/anon/pen/LxYEdX

Answer №2

Make sure to update the bar style value once you hover over.

Once the button is hovered over, the width of the bar will change to 100% within the button.

Remember to include the CSS style "&:hover:after {width: 100%;}" in both #B1 and #B2

You can find the code on Codepen here: http://codepen.io/onyoon7/pen/rjNaov

#B1 {
  margin: 50px;
  margin-top: 50px;
  margin-bottom: 50px;
  flex: 1 1 auto;
  padding: 20px;
  border: 2px solid #f7f7f7;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow:hidden;
  transition: .3s;
  &:after {
    position: absolute;
    transition: .3s;
    content: '';
    width: 0;
    left: 0;
    bottom: 0;
    height: 3px;
    background: #f7f7f7;
  }
  &:hover:after {
    width: 100%;
  }
}

#B2 {
  margin: 50px;
  flex: 1 1 auto;
  padding: 20px;
  border: 2px solid #f7f7f7;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow:hidden;
  transition: .3s;
  &:after {
    position: absolute;
    transition: .3s;
    content: '';
    width: 0;
    left: 0;
    bottom: 0;
    height: 3px;
    background: #f7f7f7;
  } 
  &:hover:after {
    width: 100%;
  }
}

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

The orientation of the mesh in relation to its parent entity

Currently tackling a project involving the creation of a 3D Widget for rotating, scaling, and translating a mesh. Facing challenges with positioning the cone used for scaling the parent mesh. Here is the code snippet in question: function generateScaleWid ...

javascriptthree.js

What is the best way to customize the label of Material UI's Tab component?

Is there a way to customize the text color inside the Tab component while still allowing it to change color when selected as an active Tab? For example: <Tabs centered onChange={handleChange} value={value} textColor={'secondary'} indicatorCol ...

cssreactjsmaterial-ui

How to change an HTML value to a string using jQuery

Looking for some assistance here: Here is the code snippet I am working with: <td id="myid">something</td> Here is the related JavaScript: var test = $("#myid").html(); console.log(test); if(test == "something"){ alert("Great!"); } I am en ...

javascriptjquery

Comprehending the application of jQuery's .remove() function within an AJAX context

Chapter 10 of jQuery In Action 3rd Edition showcases the following code snippet: $('#boot-chooser-control') .load('actions/fetch-boot-style-options.php') .change(function(event) { $('#product-detail-pane').load ...

javascriptjqueryajax

Updating and showing a variable in a PHP file using JavaScript within an HTML webpage

My goal is to establish a variable in a PHP file on my server named "likes." Subsequently, I wish to incorporate a like button on my HTML webpage that, when clicked, will utilize JavaScript to modify the "likes" variable in the PHP file and increase it by ...

javascriptphphtmlvariables

Utilized OBJLoader to load an item successfully; now seeking guidance on calculating the coordinates of an element within (three.js)

I am utilizing three.js and OBJLoader to create a 3D human head representation: let renderer, camera, scene, head, light, projectiles; new THREE.OBJLoader().load(objUrl, initialize); function initialize(obj) { renderer = new THREE.WebGLRenderer({ al ...

javascriptthree.js

How can a JSON object be correctly generated in Rails and then fetched using jQuery/Ajax from a controller method?

I am currently developing an application that utilizes an AJAX request to fetch JSON data from a rails action. Everything appears to be working as expected, but upon debugging the code, I noticed that the JSON value I require is returning as undefined. Be ...

javascriptjqueryruby-on-railsajaxjson

Is it possible to overlay a three.js scene onto an HTML video element?

A project I am working on involves developing an AR app that can display markers for North, East, South, and West using a smartphone camera. The goal is to create a scene with a transparent background that can be overlayed on a video feed from the camera. ...

javascripthtmlcssthree.jsaugmented-reality

Looking for assistance in designing a responsive web page with CSS, specifically in determining the optimal page width

Currently, I am working on making my web page responsive for four different screen sizes (320px, 640px, 980px, and 1024px). Everything looks great and adapts well when I resize the site up to 1024px. However, once the size goes beyond that, I want to preve ...

htmlcssresponsive-designviewport

JavaScript JCrop feature that allows users to resize images without cropping

I'm currently attempting to utilize JCrop for image cropping, but I'm running into frustratingly incorrect results without understanding why. The process involves an image uploader where selecting an image triggers a JavaScript function that upda ...

javascriptjquerywebjcrop

Creating a Future Prediction Graph with ECharts

I am looking to create a forecast chart that includes both Actual values (presented as a line chart) and projected values (displayed as a dotted chart). An example of what I have in mind can be seen here, created using Excel: https://i.sstatic.net/q18An.pn ...

javascriptecharts

What is the best way to eliminate the ng-hide class dynamically in AngularJS?

https://i.sstatic.net/ShZ3n.pnghttps://i.sstatic.net/n7UsG.pngI need to implement the image upload feature and facing an issue <div class="container responsiveImageSet"> <div ng-show="imageLoader" style="text-align: center;"> <img cla ...

javascriptangularjs

Guide on toggling visibility of a column in Material-ui based on a conditional statement

Can someone help me with code that allows me to hide or show the TableCell based on an if statement? I am currently working with MATERIAL-UI framework which can be found here: https://material-ui.com/ <TableBody> {Object.entries(servicesCode).map ...

javascriptreactjsmaterial-uishow-hide

What steps should I take to resolve a plugin error specifically related to index.js while using Cypress?

I am encountering an error in Cypress A plugin has thrown the following error, causing our tests to stop running due to a plugin crash. Please verify your plugins file (/home/dev2/Desktop/kavitaSeffcon/CypressProject/cypress/plugins/index.js) Error: ENOE ...

javascriptnode.jsnpmcypressnode-modules

Understanding ReactJs component syntax: Exploring the nuances and distinctions

Currently diving into the world of Reactjs and working on creating a basic component. I'm puzzled about why this particular syntax for a component: import React, { Component } from 'react'; export default class AboutPage extends Component { ...

javascriptreactjs

Is there a way to apply filters to jquery datatables during initialization process?

Is there a way to server-side filter datatable during initialization? I attempted the following code: function tableFilter(arg1, param2, value3) { var searchTable = $("#tblsearch").dataTable({ "bRetrieve": true, "b ...

javascriptjquerydatatables

Store the information retrieved from an Ajax call regarding an artist on the page, ensuring that it is only saved once for that

I have been working on a single-page application that utilizes the Spotify REST API and JQuery to enable users to search for an artist and display their information on the page. However, I want to ensure that the app saves details about each artist only ...

javascriptjqueryajaxapispotify

Reducing the size of the website does not necessarily mean the body will be at 100% width

While inspecting the site, I noticed that the body does not extend to 100% width of the screen when I reduce the size of the site. After removing the Bootstrap classes, the issue seems to be resolved. I even tried adding body{width: 100%} but it did not h ...

htmlcssbootstrap-5

Prevent the page from refreshing when a value is entered

I currently have a table embedded within an HTML form that serves multiple purposes. The first column in the table displays data retrieved from a web server, while the second column allows for modifying the values before submitting them back to the server. ...

javascripthtmlforms

Experiencing a [$compile:multidir] error when attempting to implement a multiselect dropdown with Angular.js

I encountered an issue when utilizing a multi-select drop-down list in Angular.js. Error: angularjs.js:107 Error: [$compile:multidir] http://errors.angularjs.org/1.4.6/$compile/multidir?p0=ngDropdownMultiselec…22%20checkboxes%3D%22tr ...

javascriptangularjsangularjs-directive