This is a beginner’s tutorial to show some of the basic Animated CSS3 Buy Now Button 2021 now available within CSS3. I’ll go through the CSS and HTML Markup code needed and explain how it all ties together.
The example I am going to use is a ‘Buy Now’ button which could be used for an eCommerce store. The button shows that the product is available for purchase and using CSS3 elements it is animated to display the price when the user hovers over it. The button could link to a shopping cart or directly into Paypal for example.
The Markup Animated CSS3 Buy Now Button
Ok, so to start with we need some HTML. The HTML for the button itself is very simple. There is one class for the button itself, and then three classes for the individual elements of the ‘buy now’ text, the price, and the image.
|
1
2
3
4
|
<a class=“buybtn” href=“#”>
<span class=“buybtn-text”>Buy Now</span>
<span class=“buybtn-hidden-text”>£149.99</span>
</a>
|
Now we need to style the button. For the purpose of this tutorial we are going to have 3 states. A normal state, a hover state and an active state for the button.
The CSS breaks down as follows:
Button and Text Styling
Next, we need to style the button itself and the three elements within it. The following code includes background gradients, shadow, and transition effects on the button and text. This is the styling the button will have in its normal state.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
a{
color: #fff;
text-decoration: none;
}
.buybtn{
font-family: Arial, sans-serif;
background:#ff8400;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#ff8400,0),color-stop(#ff6600,1));
background:-webkit-linear-gradient(top, #ff8400 0%, #ff6600 100%);
background:-o-linear-gradient(top, #ff8400 0%, #ff6600 100%);
background:linear-gradient(top, #ff8400 0%, #ff6600 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ff8400′, endColorstr=’#ff6600′,GradientType=0 );
padding-left:20px;
padding-right:65px;
height:45px;
display:inline-block;
position:relative;
border:1px solid #ff5a00;
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
float:left;
clear:both;
margin:10px 0px;
overflow:hidden;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}
.buybtn-text{
padding-top:10px;
display:block;
font-size:18px;
white-space:nowrap;
text-shadow:0px 1px 1px rgba(255,255,255,0.3);
color:#6e1d08;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.buybtn-hidden-text{
position:absolute;
height:100%;
top:0px;
right:52px;
width:0px;
background:#6e1d08;
text-shadow:0px -1px 1px #363f49;
color:#fff;
font-size:18px;
white-space:nowrap;
text-transform:uppercase;
text-align:left;
text-indent:17px;
overflow:hidden;
line-height:42px;
-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
-moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
-webkit-transition:width 0.3s linear;
-moz-transition:width 0.3s linear;
-o-transition:width 0.3s linear;
transition:width 0.3s linear;
}
.buybtn-image{
position:absolute;
right:0px;
top:0px;
height:100%;
width:52px;
border-left:1px solid #ff5a00;
-webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
-moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.buybtn-image span{
width:38px;
height:38px;
opacity:0.7;
position:absolute;
left:50%;
top:50%;
margin:-20px 0px 0px -20px;
background:transparent url(../images/cart.png) no-repeat 75% 55%;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}
|
Hover Styling
The following CSS makes a minor adjustment to the already defined button styles. These styles are activated when a user hovers over the button.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.buybtn:hover .buybtn-text{
text-shadow:0px 1px 1px #5d81ab;
color:#fff;
}
.buybtn:hover .buybtn-hidden-text{
width:100px;
}
.buybtn:hover .buybtn-image span{
opacity:1;
}
|
Active State Styling
Finally, we make a slightly darker background for the button to be shown when the button is clicked.
|
1
2
3
|
.buybtn:active{
background:#ff5a00;
}
|
and that’s it! Simply edit the CSS to change the styles and transitions, and edit the Markup to change the Animated CSS3 Buy Now Button content.
