Button Templates Using CSS will create 3 cool effect buttons. These templates and creative effects will stimulate users to click. This is one of key components in web design templates as well as creating a user-friendly interface.
In this article, we will share with you 3 Button Templates Using CSS that will support you get more ideas and can apply them to your website without using more programming code like JavaScript. The templates will create the attractive level which stimulates users to visit your website. In addition, it supports you to learn or review your skill or what you learn from CSS & HTML.
Button Templates Using CSS
Button Templates Using CSS – How to create
If you are a visitor who often visits our tutorials, you will know the basic thing to create any effect on front-end. Can you guess what it is? Yeah, CSS & HTML are the two things always involve to our projects. They work together to create your expected effects. You can review more how they work from different cool effects including bubbles effect, smile face effect, ring phone effects…
There are two main parts that you should do to create the effects including HTML & CSS. If you are not sure how to do you can learn through some free courses on our website.
If you do not have time you can copy and paste the following codes below. However, we recommend you should go to one or two basic courses to learn. They will help you a lot to understanding the codes and also you can create new effects by yourself like these button Templates Using CSS in the future.
CSS – Adding properties to create effects for buttons
3 buttons CSS
CSS
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
/* Mau sac cua cac button */
.btn{
margin-bottom:20px;
}
.btn-1 {
background-color:#F27935;
}
.btn-1 .round {
background-color:#f59965;
}
.btn-2 {
background-color:#00AFD1;
}
.btn-2 .round {
background-color:#00c4eb;
}
.btn-3 {
background-color:#5A5B5E;
}
.btn-3 .round {
background-color:#737478;
}
/* Thiết lập chung cho các button */
a {
text-decoration:none;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
padding:12px53px12px23px;
color:#fff;
text-transform:uppercase;
font-family:sans-serif;
font-weight:bold;
position:relative;
-moz-transition:all0.3s;
-o-transition:all0.3s;
-webkit-transition:all0.3s;
transition:all0.3s;
display:inline-block;
}
a span {
position:relative;
z-index:3;
}
a .round {
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
width:38px;
height:38px;
position:absolute;
right:3px;
top:3px;
-moz-transition:all0.3sease-out;
-o-transition:all0.3sease-out;
-webkit-transition:all0.3sease-out;
transition:all0.3sease-out;
z-index:2;
}
a .round i {
position:absolute;
top:50%;
margin-top:-6px;
left:50%;
margin-left:-4px;
-moz-transition:all0.3s;
-o-transition:all0.3s;
-webkit-transition:all0.3s;
transition:all0.3s;
}
.txt {
font-size:14px;
line-height:1.45;
}
/* button example 1 */
.type-1 a:hover {
padding-left:48px;
padding-right:28px;
}
.type-1 a:hover .round {
width:calc(100%-6px);
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
}
.type-1 a:hover .round i {
left:12%;
}
/* button example 2 */
.type-2 a:hover .round {
background:none;
}
.type-2 a:hover .round i {
left:70%;
}
/* button example 3 */
.type-3 .round {
background:transparent;
}
.type-3 a {
position:relative;
overflow:hidden;
}
.type-3 a.btn-1:after {
background-color:#f59965;
}
.type-3 a.btn-2:after {
background-color:#00c4eb;
}
.type-3 a.btn-3:after {
background-color:#737478;
}
.type-3 a:after {
content:"";
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
width:37px;
height:38px;
position:absolute;
right:3px;
top:3px;
-moz-transition:all0.3sease-out;
-o-transition:all0.3sease-out;
-webkit-transition:all0.3sease-out;
transition:all0.3sease-out;
}
.type-3 a:hover:after {
right:100%;
width:50%;
}
.type-3 a:hover i {
margin-left:4px;
}
Demo
You can check your final result with our result in CodePen here.
Conclusion
Button is a useful component that you will use on front-end usually. If you are a developer or learner, you should understand this technique and extend your knowledge on CSS & HTML. Hope you enjoy with this effect.
