This page requires a Javascript enabled browser
<< Back | Main Menu | FAQ | [?]

CSS3 buttons

Local: CSS/JS files (add code to <HEAD> section):

?
1
2
<!-- DC CSS3 Buttons CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/css3_buttons/css/dc_button_styles.css" />

Hosted: CSS/JS files (add code to <HEAD> section):

?
1
2
<!-- DC CSS3 Buttons CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/css3_buttons/css/dc_button_styles.css" />

Small Link Buttons <a href>

Black   Blue   Purple   Green   Teal   Magenta   Red   Orange   Yellow   Gray   White  

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- DC CSS3 Buttons Start -->
<a class="dc_c3b_small dc_button" href="#"><span>Black</span></a>
<a class="dc_c3b_small dc_c3b_blue dc_button" href="#"><span>Blue</span></a>
<a class="dc_c3b_small dc_c3b_purple dc_button" href="#"><span>Purple</span></a>
<a class="dc_c3b_small dc_c3b_green dc_button" href="#"><span>Green</span></a>
<a class="dc_c3b_small dc_c3b_teal dc_button" href="#"><span>Teal</span></a>
<a class="dc_c3b_small dc_c3b_magenta dc_button" href="#"><span>Magenta</span></a>
<a class="dc_c3b_small dc_c3b_red dc_button" href="#"><span>Red</span></a>
<a class="dc_c3b_small dc_c3b_orange dc_button" href="#"><span>Orange</span></a>
<a class="dc_c3b_small dc_c3b_yellow dc_button" href="#"><span>Yellow</span></a>
<a class="dc_c3b_small dc_c3b_gray dc_button" href="#"><span>Gray</span></a>
<a class="dc_c3b_small dc_c3b_white dc_button" href="#"><span>White</span></a>
<!-- DC CSS3 Buttons End -->

Large Link Buttons <a href>

Black   Blue   Purple   Green   Teal   Magenta   Red   Orange   Yellow   Gray   White  

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- DC CSS3 Buttons Start -->
<a class="dc_c3b_large dc_button" href="#"><span>Black</span></a>
<a class="dc_c3b_large dc_c3b_blue dc_button" href="#"><span>Blue</span></a>
<a class="dc_c3b_large dc_c3b_purple dc_button" href="#"><span>Purple</span></a>
<a class="dc_c3b_large dc_c3b_green dc_button" href="#"><span>Green</span></a>
<a class="dc_c3b_large dc_c3b_teal dc_button" href="#"><span>Teal</span></a>
<a class="dc_c3b_large dc_c3b_magenta dc_button" href="#"><span>Magenta</span></a>
<a class="dc_c3b_large dc_c3b_red dc_button" href="#"><span>Red</span></a>
<a class="dc_c3b_large dc_c3b_orange dc_button" href="#"><span>Orange</span></a>
<a class="dc_c3b_large dc_c3b_yellow dc_button" href="#"><span>Yellow</span></a>
<a class="dc_c3b_large dc_c3b_gray dc_button" href="#"><span>Gray</span></a>
<a class="dc_c3b_large dc_c3b_white dc_button" href="#"><span>White</span></a>
<!-- DC CSS3 Buttons End -->

Large Link Download Buttons <a href>

Download (8 MB)   Download (8 MB)   Download (8 MB)   Download (8 MB)   Download (8 MB)   Download (8 MB)   Download (8 MB)   Download (8 MB)   Download (8 MB)   Download (8 MB)   Download (8 MB)  

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- DC CSS3 Buttons Start -->
<a class="dc_c3b_large dc_button dc_c3b_download" href="#"><span>Download <dc_c3b_small>(8 MB)</small></span></a>
<a class="dc_c3b_large dc_c3b_blue dc_button dc_c3b_download" href="#"><span>Download <small>(8 MB)</small></span></a>
<a class="dc_c3b_large dc_c3b_purple dc_button dc_c3b_dlLight" href="#"><span>Download <small>(8 MB)</small></span></a>
<a class="dc_c3b_large dc_c3b_green dc_button dc_c3b_dlLight" href="#"><span>Download <small>(8 MB)</small></span></a>
<a class="dc_c3b_large dc_c3b_teal dc_button dc_c3b_dlLight" href="#"><span>Download <small>(8 MB)</small></span></a>
<a class="dc_c3b_large dc_c3b_magenta dc_button dc_c3b_dlLight" href="#"><span>Download <small>(8 MB)</small></span></a>
<a class="dc_c3b_large dc_c3b_red dc_button dc_c3b_dlLight" href="#"><span>Download <small>(8 MB)</small></span></a>
<a class="dc_c3b_large dc_c3b_orange dc_button dc_c3b_dlLight" href="#"><span>Download <small>(8 MB)</small></span></a>
<a class="dc_c3b_large dc_c3b_yellow dc_button dc_c3b_dlLight" href="#"><span>Download <small>(8 MB)</small></span></a>
<a class="dc_c3b_large dc_c3b_gray dc_button dc_c3b_dlDark" href="#"><span>Download <small>(8 MB)</small></span></a>
<a class="dc_c3b_large dc_c3b_white dc_button dc_c3b_download" href="#"><span>Download <small>(8 MB)</small></span></a>
<!-- DC CSS3 Buttons End -->

Small Submit Buttons <input>

                     

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- DC CSS3 Buttons Start -->
<input type="submit" class="dc_c3b_small dc_button dc_c3b_input" value="Black" />
<input type="submit" class="dc_c3b_small dc_button dc_c3b_blue dc_c3b_input" value="Blue" />
<input type="submit" class="dc_c3b_small dc_button dc_c3b_purple dc_c3b_input" value="Purple" />
<input type="submit" class="dc_c3b_small dc_button dc_c3b_green dc_c3b_input" value="Green" />
<input type="submit" class="dc_c3b_small dc_button dc_c3b_teal dc_c3b_input" value="Teal" />
<input type="submit" class="dc_c3b_small dc_button dc_c3b_magenta dc_c3b_input" value="Magenta" />
<input type="submit" class="dc_c3b_small dc_button dc_c3b_red dc_c3b_input" value="Red" />
<input type="submit" class="dc_c3b_small dc_button dc_c3b_orange dc_c3b_input" value="Orange" />
<input type="submit" class="dc_c3b_small dc_button dc_c3b_yellow dc_c3b_input" value="Yellow" />
<input type="submit" class="dc_c3b_small dc_button dc_c3b_gray dc_c3b_input" value="Gray" />
<input type="submit" class="dc_c3b_small dc_button dc_c3b_white dc_c3b_input" value="White" />
<!-- DC CSS3 Buttons End -->

Large Submit Buttons <input>

                     

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- DC CSS3 Buttons Start -->
<input type="submit" class="dc_c3b_large dc_button dc_c3b_input" value="Black" />
<input type="submit" class="dc_c3b_large dc_button dc_c3b_blue dc_c3b_input" value="Blue" />
<input type="submit" class="dc_c3b_large dc_button dc_c3b_purple dc_c3b_input" value="Purple" />
<input type="submit" class="dc_c3b_large dc_button dc_c3b_green dc_c3b_input" value="Green" />
<input type="submit" class="dc_c3b_large dc_button dc_c3b_teal dc_c3b_input" value="Teal" />
<input type="submit" class="dc_c3b_large dc_button dc_c3b_magenta dc_c3b_input" value="Magenta" />
<input type="submit" class="dc_c3b_large dc_button dc_c3b_red dc_c3b_input" value="Red" />
<input type="submit" class="dc_c3b_large dc_button dc_c3b_orange dc_c3b_input" value="Orange" />
<input type="submit" class="dc_c3b_large dc_button dc_c3b_yellow dc_c3b_input" value="Yellow" />
<input type="submit" class="dc_c3b_large dc_button dc_c3b_gray dc_c3b_input" value="Gray" />
<input type="submit" class="dc_c3b_large dc_button dc_c3b_white dc_c3b_input" value="White" />
<!-- DC CSS3 Buttons End -->

Small Buttons <button>

                     

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- DC CSS3 Buttons Start -->
<button class="dc_c3b_small dc_button"><span>Black</span></button>
<button class="dc_c3b_small dc_c3b_blue dc_button"><span>Blue</span></button>
<button class="dc_c3b_small dc_c3b_purple dc_button"><span>Purple</span></button>
<button class="dc_c3b_small dc_c3b_green dc_button"><span>Green</span></button>
<button class="dc_c3b_small dc_c3b_teal dc_button"><span>Teal</span></button>
<button class="dc_c3b_small dc_c3b_magenta dc_button"><span>Magenta</span></button>
<button class="dc_c3b_small dc_c3b_red dc_button"><span>Red</span></button>
<button class="dc_c3b_small dc_c3b_orange dc_button"><span>Orange</span></button>
<button class="dc_c3b_small dc_c3b_yellow dc_button"><span>Yellow</span></button>
<button class="dc_c3b_small dc_c3b_gray dc_button"><span>Gray</span></button>
<button class="dc_c3b_small dc_c3b_white dc_button"><span>White</span></button>
<!-- DC CSS3 Buttons End -->

Large Buttons <button>

                     

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- DC CSS3 Buttons Start -->
<button class="dc_c3b_large dc_button"><span>Black</span></button>
<button class="dc_c3b_large dc_c3b_blue dc_button"><span>Blue</span></button>
<button class="dc_c3b_large dc_c3b_purple dc_button"><span>Purple</span></button>
<button class="dc_c3b_large dc_c3b_green dc_button"><span>Green</span></button>
<button class="dc_c3b_large dc_c3b_teal dc_button"><span>Teal</span></button>
<button class="dc_c3b_large dc_c3b_magenta dc_button"><span>Magenta</span></button>
<button class="dc_c3b_large dc_c3b_red dc_button"><span>Red</span></button>
<button class="dc_c3b_large dc_c3b_orange dc_button"><span>Orange</span></button>
<button class="dc_c3b_large dc_c3b_yellow dc_button"><span>Yellow</span></button>
<button class="dc_c3b_large dc_c3b_gray dc_button"><span>Gray</span></button>
<button class="dc_c3b_large dc_c3b_white dc_button"><span>White</span></button>
<!-- DC CSS3 Buttons End -->

Double Decker Buttons

Click ThisTry it today for free!   Click ThisTry it today for free!   Click ThisTry it today for free!   Click ThisTry it today for free!   Click ThisTry it today for free!   Click ThisTry it today for free!   Click ThisTry it today for free!   Click ThisTry it today for free!   Click ThisTry it today for free!   Click ThisTry it today for free!   Click ThisTry it today for free!  

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- DC CSS3 Buttons Start -->
<a class="tall dc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<a class="tall dc_c3b_blue dc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<a class="tall dc_c3b_purple dc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<a class="tall dc_c3b_green dc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<a class="tall dc_c3b_teal dc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<a class="tall dc_c3b_magenta dc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<a class="tall dc_c3b_red dc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<a class="tall dc_c3b_orange dc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<a class="tall dc_c3b_yellow dc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<a class="tall dc_c3b_gray dc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<a class="tall dc_c3b_white dc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<!-- DC CSS3 Buttons End -->


© TemplateAccess