Button bounces back upon completion of transform transition when hovered over

My goal is to create a button that moves up 5px when hovered over.

I've successfully implemented this using transitions. However, the issue arises when hovering on the lower part of the button - as I move my mouse (I suspect it checks :hover on mouse update, but CSS is new to me...), the button shifts up causing it to no longer be hovered, resulting in a flickering effect.

 .btn {
  display:inline-block;
  transform: translate(0px,0px);
  transition: transform 50ms ease ;
 }

.btn:hover {
  transform: translate(0px,-5px);
  transition: transform 50ms ease ;
}
    <button class="ui button btn"> That rocks!</button>

How can I avoid this behavior? The only solution I found was to use display: inline-block, which didn't solve the issue.

Additionally, I attempted using a container div, but the problem persists.

htmlcss

Answer №1

To enhance the functionality, it is recommended to use a container that monitors the :hover state and then applies a transform to the contained button. This approach allows for defining the transition and transform properties just once.

.btn {
  display: inline-block;
  transition: transform 50ms ease;
}

div:hover .btn {
  transform: translate(0px, -5px);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div>
  <button class="ui button btn"> That rocks!</button>
</div>

Answer №2

Place the button inside a box and create an effect where moving the cursor over the box alters the appearance of the button:

.box:hover .button {
  shift: move(0px,-5px);
}

Answer №3

To make it work, simply set the hover event on the container. 

.btn {
  display:inline-block;
  transform: translate(0px,0px);
  transition: transform 50ms ease ;
 }
div {
  transition: transform 50ms ease ;
  background: pink;
}

div:hover .btn {
  transition: transform 50ms ease ;
  transform: translate(0px,-5px);
}
<div>
  <button class="ui button btn"> That rocks!</button>
</div>

Answer №4

On hover, include a ::after pseudo-element with these specified styles:

.btn:hover::after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 10px;
}

This addition will ensure the button remains in focus.

Code Snippet: 

.btn {
  display:inline-block;
  transform: translate(0px,0px);
  transition: transform 50ms ease;
 }
 
.btn:hover::after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 10px;
}

.btn:hover {
  transform: translate(0px,-5px);
  transition: transform 50ms ease ;
}
<button class="ui button btn"> That rocks!</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

Guide on aligning two text boxes next to each other using CSS flexbox and restricting the width for desktop screens exclusively

I am struggling with arranging two text boxes in a CSS flexbox. The left side contains a tagline while the right side has a brief summary. My goal is to have these boxes display side by side at the center of the webpage for desktop screens (min width 1024p ...

htmlcss

Modify THREE.Mesh.position when slider value changes

Hey everyone, I've been tinkering with mesh translations using the Three.js library. I've set up HTML sliders to dynamically update the values within my project through JavaScript. Here's an example of what I'm working on: https://i.s ...

javascripthtmlthree.jsslideronchange

CSS files are failing to load in ASP .NET framework

I am facing a similar issue to the one described by another user on Stack Overflow here: Asp.NET not applying my CSS files However, after adding the following code to my web.config file, nothing seems to change: <location path="css"> &l ...

cssasp.net

Excessive padding issues arising from Bootstrap 4 columns and rows

Utilizing bootstrap to structure columns and rows for my images is causing excessive padding around them, deviating from the intended design: https://i.sstatic.net/8cQVg.png Here's the HTML structure I employed: <!-- header --> <header> ...

htmlcssbootstrap-4

Having trouble with making the XPath function last() function properly

Currently conducting a test on a web app using Selenium. My objective is to extract the final comment from the latest post in a feed, with the most recent post appearing at the top and the last comment located at the bottom of the thread beneath the post. ...

javahtmlxmlseleniumxpath

Inline display with automatic margin

I am seeking guidance from someone with more experience to help identify the source of this margin. Your assistance is greatly appreciated! https://i.stack.imgur.com/46k7k.png Below is the CSS code in question: .logo-icon { background-image: url(&ap ...

htmlcss

What is the solution for setting a regular height to a Bootstrap select when no option is currently selected?

On my webpage, I am incorporating bootstrap select and I want it to be empty initially with a value of "" when the page first loads. This is essential because it is a required field, so if a user attempts to submit the form without making a selec ...

htmltwitter-bootstrapbootstrap-select

Display the div only during the printing process

Imagine I have a situation where there is a block of content that I only want to show when printing. It looks something like this: <div id="printOnly"> <b>Title</b> <p> Printing content </p> </div&g ...

javascripthtmlcss

What is the reason behind MySQL rejecting float values?

inquiry in .php $que_cinstructors = " INSERT INTO course_instructors ( usn, i1, i2, i3, i4, i5, i6, i7, i8, i9 ) VALUES ( :usn, :i1, :i2, :i3, :i4, :i5, :i6, :i7, :i8, :i9 )"; $query_params3 = array( ':usn' => ...

phphtmlmysql

What are some effective ways to display input text alongside input radio buttons?

Hello, I am trying to display an input with a radio button, but for some reason it is not working correctly. When I click on 'No' it shows the correct input, but when I click on 'Yes' nothing appears. I'm unsure why this is happeni ...

javascripthtmlruby-on-railsinput

Minimizing the frequency of getElementById calls for the same HTML element

When dealing with repetitive function calls using the same element as a parameter, is it more effective to store the element as a global variable? For instance, imagine a function that is triggered on every key press and takes an element as an argument. ...

javascripthtmlglobal-variablesgetelementbyid

When using jquery, the .css("border-color") method fails to provide a return value

I came up with the jquery javascript below $(document).mousemove(function(event) { var element = event.target; $(element).css("border","black solid 1px"); }); $(document).mouseout(function(event) { var element = event.target; console.log ...

jquerycssborder

How can the CSS percentage be converted to pixels for the bottom parameter?

Within my CSS file, I have the following code snippet: #myClass { position: absolute; height: 6px; width: 100%; bottom: 66%; << here is 66% left: 0; right: 0; background-color: #666; cursor: n-resize; } Currently, ...

csscalc

Scrolling Vertically using WinJS ListView

Is it possible to achieve vertical scrolling in a ListView using HTML/JS for Windows 8 applications with WinJS? I successfully created a Windows 8 app with XAML/C# that utilizes a ListView for vertical scrolling. However, when attempting to replicate the ...

htmlcsswindows-8winjs

Generating multiple divs filled with content using JavaScript

Currently, I am diving into the world of JavaScript and aiming to develop something similar to the code snippet below using JavaScript. My goal is to easily adjust the number of images or divs that will be generated on the webpage. <div class="row"> ...

javascripthtmlimageclassfor-loop

Change the dropdown header behavior from hovering over it to clicking on it

This snippet of code is integrated into our header to showcase the cart. Currently, the dropdown appears when hovering over it. Is there a way to adjust this so that the dropdown shows up when onclick? <a href="#header-cart" class="skip-link skip-cart ...

javascriptjqueryhtmlcss

Displaying both items upon clicking

Hey there, I'm having an issue where clicking on one article link opens both! <span class='pres'><img src='http://files.appcheck.se/icons/minecraft.png' /></span><span class='info'><a href=&apo ...

javascriptjqueryhtml

VueJS component fails to remain anchored at the bottom of the page while scrolling

I am currently using a <md-progress-bar> component in my VueJS application, and I am trying to make it stay fixed at the bottom of the screen when I scroll. I have attempted to use the styles position: fixed;, absolute, and relative, but none of them ...

javascriptcssvue.jsvue-material

How can I include a close/ok button at the bottom of a bootstrap multiselect component?

Currently, I am utilizing the Bootstrap multiselect tool to filter query outcomes on a specific page. After selecting one or multiple options, my goal is to have a "close" or "OK" button visible at the bottom of the selection list. Upon clicking this butto ...

jquerycsstwitter-bootstrap-3bootstrap-multiselect

PHP Cascading dropdowns on the server side

Having only one value in the first dropdown, I am attempting to develop a cascading dropdown in PHP that automatically populates the second dropdown upon page load. In my database, there is a table named 'nights' with fields such as: 'city& ...

phpmysqlhtmlvariablesdrop-down-menu