Friday, November 14, 2014

Add Eye-Catching CSS3 Animated Buttons in your Blog

7:42 PM    No comments

             Add Eye-Catching CSS3 Animated Buttons in your Blog

Add Eye-Catching CSS3 Animated Buttons in your Blogger Blog Wordpress Tutorial
Integerate CSS3 Animated Buttons To Your Blogger Blog
These lookings CSS3 buttons were first posted by Martin Angelov and then many bloggers and webmasters posted these buttons.

Today i will show you how to add these buttons in your blogger/wordpress blog. You can use these buttons for DEMO, DOWNLOAD, Read More and other purposes.

Here we go:

First of all back-up your template (recommended becasue if something goes wrong with your template you can easily restore it).

CSS Part:

Go to Blogger Dashboard > Template> Edit HTML
Check Widget Box.
Now search for below code into your template; (tip: press Ctrl+F to start search).

1
]]></b:skin>
 
Add this code just above it.


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
/*CSS3 Buttons Start Code*/
/*By http://akkitrickx.blogspot.com*/
.button {
    font: 15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
    text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
    text-decoration: none !important;
    white-space: nowrap;
    display: inline-block;
    vertical-align: baseline;
    position: relative;
    cursor: pointer;
    padding: 10px 20px;
    background-repeat: no-repeat;
/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */
    background-position: bottom left;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png');
/* Multiple backgrounds version. The background images
are defined individually in color classes */
    background-position: bottom left, top right, 0 0, 0 0;
    background-clip: border-box;
/* Applying a default border raidus of 8px */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
/* A 1px highlight inside of the button */
    -moz-box-shadow: 0 0 1px #fff inset;
    -webkit-box-shadow: 0 0 1px #fff inset;
    box-shadow: 0 0 1px #fff inset;
/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}
 
.button:hover {
/* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/
    background-position: top left;
    background-position: top left, bottom right, 0 0, 0 0;
}
 
.button:active {
/* Moving the button 1px to the bottom when clicked */
    bottom: -1px;
}
/* The three buttons sizes */
.button.big {
    font-size: 30px;
}
 
.button.medium {
    font-size: 18px;
}
 
.button.small {
    font-size: 13px;
}
/* A more rounded button */
.button.rounded {
    -moz-border-radius: 4em;
    -webkit-border-radius: 4em;
    border-radius: 4em;
}
/* Defining four button colors */
/* BlueButton */
.blue.button {
    color: #0f4b6d !important;
    border: 1px solid #84acc3 !important;
/* A fallback background color */
    background-color: #48b5f2;
/* Specifying a version with gradients according to */
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
 
.blue.button:hover {
    background-color: #63c7fe;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button {
    color: #345903 !important;
    border: 1px solid #96a37b !important;
    background-color: #79be1e;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
 
.green.button:hover {
    background-color: #89d228;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button {
    color: #693e0a !important;
    border: 1px solid #bea280 !important;
    background-color: #e38d27;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
 
.orange.button:hover {
    background-color: #ec9732;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
 
.gray.button {
    color: #525252 !important;
    border: 1px solid #a5a5a5 !important;
    background-color: #a9adb1;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
 
.gray.button:hover {
    background-color: #b6bbc0;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzb8z3NWRXtOL_Eio32JWxGSbpI6DDKteUjfIwn9FHZTl9n82sC6SYtXiqBVU-l5aEtI_29uT4dBTP-NIqbloRAs9wc9Lxdfzw6pVbXCqtIpsWFogIi72PKEgz2Tz_9DtQoKyWOtZcJw/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

We have succeessfully integerated CSS code into your template.

HTML Part:

Now choose your button according to your need. You have different choices like Big Button, Medium Button and Small Button, You can also choose different colors like Green, Blue, Orange and Gray. Place this HTML code wherever yo want to display your button, you can paste it into your posts or sidebar.

1. HTML code for Big Buttons
1
2
3
4
<a class="button big blue" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button big green" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button big orange" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button big gray" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
2.HTML code for Medium Buttons
1
2
3
4
<a class="button blue medium" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button green medium" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button orange medium" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button gray medium" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
3.HTML code for SMALL Buttons
1
2
3
4
<a class="button small blue" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button small green" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button small orange" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button small gray" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
4.HTML code for SMALL ROUNDED Buttons
1
2
3
4
<a class="button small blue rounded" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button small green rounded" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button small orange rounded" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button small gray rounded" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>

Have to say?

What do you want to say about these cool buttons and this tutorial? Don't forget to post your comments.
Saty tuned for latest and new stuff!


0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)