Make Button Bounce with CSS3 - html

Question

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.

Answer 1

You can use a keyframe animation to animate the scale ratio and make your button 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%;
animation: bounce .3s infinite alternate;
}
#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 on the last iteration) :
.order {
position: absolute;
top: 50px;
left: 50px;
width: 75px;
line-height: 75px;
text-align:center;
opacity: 1;
background: green;
color:#fff;
border-radius:50%;
animation: bounce .3s infinite alternate;
animation-iteration-count: 8;
}
#keyframes bounce {
to { transform: scale(1.2); }
}
<div class="order">Order</div>

Answer 2

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>

Answer 3

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>

Answer 4

You can animate(bounce) like following:
CSS:
.order {
background:url("http://onestudio.id-staging.com/_BUILD/Dominos/BANNERS/C3%20Digital%20Midweek%20Rescue/Wide%20Skyscraper/images/order.png");
position: absolute;
top:50px;
left:50px;
width: 75px;
height: 75px;
z-index:1;
opacity:1;
animation: myfirst 2s infinite;
-webkit-animation: myfirst 2s infinite;
}
#-webkit-#keyframes myfirst {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
#keyframes myfirst {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
Check Fiddle