Make Button Bounce with CSS3
Solution 1
You can use a keyframe animation to animate the scale ratio of your button and make it bounce:
.order {
position: absolute;
top: 50px;
left: 50px;
width: 75px;
line-height: 75px;
text-align:center;
opacity: 1;
background: green;
color:#fff;
border-radius:50%;
-webkit-animation: bounce .3s infinite alternate;
-moz-animation: bounce .3s infinite alternate;
animation: bounce .3s infinite alternate;
}
@-webkit-keyframes bounce {
to { -webkit-transform: scale(1.2); }
}
@-moz-keyframes bounce {
to { -moz-transform: scale(1.2); }
}
@keyframes bounce {
to { transform: scale(1.2); }
}
<div class="order">Order</div>
Iteration count:
If you want to stop the animation after a number of "bounces", you can use animation-iteration-count
(use an even number of iterations otherwise the animation will snap at the end) :
.order {
position: absolute;
top: 50px;
left: 50px;
width: 75px;
line-height: 75px;
text-align:center;
opacity: 1;
background: green;
color:#fff;
border-radius:50%;
-webkit-animation: bounce .3s infinite alternate;
-moz-animation: bounce .3s infinite alternate;
animation: bounce .3s infinite alternate;
-webkit-animation-iteration-count: 8;
-moz-animation-iteration-count: 8;
animation-iteration-count: 8;
}
@-webkit-keyframes bounce {
to { -webkit-transform: scale(1.2); }
}
@-moz-keyframes bounce {
to { -moz-transform: scale(1.2); }
}
@keyframes bounce {
to { transform: scale(1.2); }
}
<div class="order">Order</div>
Solution 2
The answer posted by web-tiki, would be the best one to use, still I have a different approach becoz you have already used position:absolute
.
See this FIDDLE you need to animate height and width for button using keyframe.
.order {
background: url("http://onestudio.id-staging.com/_BUILD/Dominos/BANNERS/C3%20Digital%20Midweek%20Rescue/Wide%20Skyscraper/images/order.png") no-repeat;
position: absolute;
background-size: cover;
top: 50px;
left: 50px;
width: 75px;
height: 75px;
z-index: 1;
opacity: 1;
-webkit-animation: mymove 1s infinite;
/* Chrome, Safari, Opera */
animation: mymove 1s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
0% {
height: 75px;
width: 75px;
}
50% {
height: 100px;
width: 100px;
}
100% {
height: 75px;
width: 75px;
}
}
/* Standard syntax */
@keyframes mymove {
0% {
height: 75px;
width: 75px;
}
50% {
height: 100px;
width: 100px;
}
100% {
height: 75px;
width: 75px;
}
}
<div class="order"></div>
Edit:
To add further, you can also animate left and top to 38px both so the button doesn't look like deviating from original position see this Fiddle
.order {
background: url("http://onestudio.id-staging.com/_BUILD/Dominos/BANNERS/C3%20Digital%20Midweek%20Rescue/Wide%20Skyscraper/images/order.png") no-repeat;
position: absolute;
background-size: cover;
top: 50px;
left: 50px;
width: 75px;
height: 75px;
z-index: 1;
opacity: 1;
-webkit-animation: mymove 1s infinite;
/* Chrome, Safari, Opera */
animation: mymove 0.5s 2;
}
/* Standard syntax */
@keyframes mymove {
0% {
height: 75px;
width: 75px;
left: 50px;
top: 50px;
}
50% {
height: 100px;
width: 100px;
left: 38px;
top: 38px;
}
100% {
height: 75px;
width: 75px;
left: 50px;
top: 50px;
}
}
<div class="order"></div>
Solution 3
try this css
.order {
background:url("http://onestudio.id-staging.com/_BUILD/Dominos/BANNERS/C3%20Digital%20Midweek%20Rescue/Wide%20Skyscraper/images/order.png");
background-size: cover;
position: absolute;
top:50px;
left:50px;
width: 75px;
height: 75px;
z-index:1;
opacity:1;
}
@keyframes fade {
from { top:40px;
left:40px;
width: 100px;
height: 100px; }
50% { top:50px;
left:50px;
width: 75px;
height: 75px; }
to { top:40px;
left:40px;
width: 100px;
height: 100px; }
}
@-webkit-keyframes fade {
from { top:40px;
left:40px;
width: 100px;
height: 100px; }
50% { top:50px;
left:50px;
width: 75px;
height: 75px; }
to { top:40px;
left:40px;
width: 100px;
height: 100px; }
}
.blink {
animation:fade 1000ms infinite;
-webkit-animation:fade 1000ms infinite;
}
try this html
<div class="order blink"></div>
Lewis Frost
Updated on June 23, 2022Comments
-
Lewis Frost almost 2 years
I am trying to make this button bounce with CSS3
.order { position: absolute; top: 50px; left: 50px; width: 75px; line-height: 75px; text-align:center; opacity: 1; background: green; color:#fff; border-radius:50%; }
<div class="order">Order</div>
I would like it to bounce towards the screen (on the Z axis) up and down.