Button CSS transition/animation hover problem - css

Question

I want to create a button which changes on hover. Here you can check it: https://drive.google.com/file/d/1fIcil2Xyky8DC2NRcfZBKXCMHk9gpat2/view?usp=sharing.
Here you can see my attempt: https://codepen.io/koravski/pen/BEvKRP
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.txt {
position: absolute;
color: #fff;
}
.box {
width: 200px;
height: 50px;
background-color: red;
transition: all 1s;
}
.box:hover {
width: 50px;
height: 5px;
margin-top: 40px;
}
<div class="txt">Call to action</div>
<div class="box"></div>
The problem is that when I hover it, it starts looping. It should be on the red rectangle so it won't loop.
If you have any suggestions it will be nice.
Thanks.

Answer 1

It's not quite clear what effect you are after but you're changing the size so when it shrinks you're not hovering on it any more.
I'd suggest a transform instead (two actually, one for the size and another for the position).
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.txt {
position: absolute;
color: #fff;
}
.box {
width: 200px;
height: 50px;
background-color: red;
transition: all 1s;
}
.box:hover {
transform: translateY(40px) scale(.1);
}
<div class="txt">Call to action</div>
<div class="box"></div>
There are other issues but it depends on what this actually supposed to do.
In fact, you can do this with a single div.
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.txt {
position: relative;
color: #fff;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
transition: all 1s;
}
.txt:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: red;
z-index: -1;
transition: all 1s;
}
.txt:hover:before {
transform: translateY(40px) scale(.1);
}
<div class="txt">Call to action</div>

Answer 2

This is happening because whenever the button shrinks, your mouse is no longer hovering over it, so the animation comes back up and hits the box (causing it to trigger once again. I'd suggest using a pseudo element -
.box::before {
background-color: red;
content: '';
position: absolute;
height: 100%;
width: 100%;
z-index: 0;
transition: all 1s;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.box:hover.box::before {
width: 50px;
height: 5px;
}
https://codepen.io/aedenmurray/pen/XQodQj

Answer 3

Here is an idea using background animation where you will need only one element:
body {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Lato', sans-serif;
}
.txt {
color: #fff;
padding:20px 50px;
background-image:linear-gradient(red,red);
background-size:100% 100%;
background-position:bottom center;
background-repeat:no-repeat;
transition:1s;
}
.txt:hover {
background-size:20% 5%;
color:#000;
}
<div class="txt">Call to action</div>

Answer 4

I would wrap your .box and .txt in a container, and then when that container is hovered, do the transition. That way, your hover area isn't being resized - instead the contents are.
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.txt {
position:absolute;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
}
.box {
width: 200px;
height: 50px;
background-color: red;
transition: all 1s;
}
.container {
position: relative;
}
.container:hover > .box {
width: 50px;
height: 5px;
margin-top: 40px;
}
<div class="container">
<div class="txt"> Call to action</div>
<div class="box"></div>
</div>
View Updated CodePen

Answer 5

The trick is to apply the :hover to a surrounding element.
So you keep hovering over the element and just the included block will change.
FYI:
translate3d is used for better performance than normal translateX.
You could improve the code further. The red element could be a ::before element, and you might want to attach :focus, too for better accessibility. And maybe use a button element.
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.btn {
position: relative;
}
.btn-txt {
color: #fff;
text-align: center;
vertical-align: middle;
position: relative;
padding: 20px 30px;
}
.btn-box {
background-color: red;
transition: all 1s;
position: absolute;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
.btn:hover .btn-box {
width: 50px;
height: 5px;
transform: translate3d(50px, 0, 0);
top: auto;
}
<div class="btn">
<div class="btn-box"></div>
<div class="btn-txt">Call to action</div>
</div>