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

3D Buttons

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

1
2
<!-- DC 3D Buttons CSS -->
<link rel="stylesheet" href="dcodes/3d_buttons/css/dc_3d_buttons.css" />

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

1
2
<!-- DC 3D Buttons CSS -->
Note: Pictograms may not load in Firefox during local browsing mode due to security zone settings.

Gray

Gray Gray Gray Gray Gray Gray Gray

View code:

1
2
3
4
5
6
7
8
9
<!-- DC 3D Buttons Start -->
<a href="#" class="dc_3d_button gray"> Gray </a>
<a href="#" class="dc_3d_button gray"> <span class="refresh"></span> Gray </a>
<a href="#" class="dc_3d_button gray"> <span class="shuffle"></span> Gray </a>
<a href="#" class="dc_3d_button gray"> <span class="preview"></span> Gray </a>
<a href="#" class="dc_3d_button gray"> <span class="tea"></span> Gray </a>
<a href="#" class="dc_3d_button gray"> <span class="wifi"></span> Gray </a>
<a href="#" class="dc_3d_button gray"> <span class="locator"></span> Gray </a>
<!-- DC 3D Buttons End -->

Orange

Orange Orange Orange Orange Orange Orange

View code:

1
2
3
4
5
6
7
8
<!-- DC 3D Buttons Start -->
<a href="#" class="dc_3d_button orange"> <span class="refresh"></span> Orange </a>
<a href="#" class="dc_3d_button orange"> <span class="shuffle"></span> Orange </a>
<a href="#" class="dc_3d_button orange"> <span class="preview"></span> Orange </a>
<a href="#" class="dc_3d_button orange"> <span class="tea"></span> Orange </a>
<a href="#" class="dc_3d_button orange"> <span class="wifi"></span> Orange </a>
<a href="#" class="dc_3d_button orange"> <span class="locator"></span> Orange </a>
<!-- DC 3D Buttons End -->

Magenta

Magenta Magenta Magenta Magenta Magenta Magenta

View code:

1
2
3
4
5
6
7
8
<!-- DC 3D Buttons Start -->
<a href="#" class="dc_3d_button magenta"> <span class="rss"></span> Magenta </a>
<a href="#" class="dc_3d_button magenta"> <span class="cloud"></span> Magenta </a>
<a href="#" class="dc_3d_button magenta"> <span class="download"></span> Magenta </a>
<a href="#" class="dc_3d_button magenta"> <span class="trash"></span> Magenta </a>
<a href="#" class="dc_3d_button magenta"> <span class="rack"></span> Magenta </a>
<a href="#" class="dc_3d_button magenta"> <span class="map"></span> Magenta </a>
<!-- DC 3D Buttons End -->

White

White White White White White White

View code:

1
2
3
4
5
6
7
8
<!-- DC 3D Buttons Start -->
<a href="#" class="dc_3d_button white"> <span class="refresh"></span> White </a>
<a href="#" class="dc_3d_button white"> <span class="shuffle"></span> White </a>
<a href="#" class="dc_3d_button white"> <span class="preview"></span> White </a>
<a href="#" class="dc_3d_button white"> <span class="tea"></span> White </a>
<a href="#" class="dc_3d_button white"> <span class="wifi"></span> White </a>
<a href="#" class="dc_3d_button white"> <span class="locator"></span> White </a>
<!-- DC 3D Buttons End -->

Cyan

Cyan Cyan Cyan Cyan Cyan Cyan

View code:

1
2
3
4
5
6
7
8
<!-- DC 3D Buttons Start -->
<a href="#" class="dc_3d_button cyan"> <span class="setting"></span> Cyan </a>
<a href="#" class="dc_3d_button cyan"> <span class="identity"></span> Cyan </a>
<a href="#" class="dc_3d_button cyan"> <span class="navigation"></span> Cyan </a>
<a href="#" class="dc_3d_button cyan"> <span class="gallery"></span> Cyan </a>
<a href="#" class="dc_3d_button cyan"> <span class="email"></span> Cyan </a>
<a href="#" class="dc_3d_button cyan"> <span class="users"></span> Cyan </a>
<!-- DC 3D Buttons End -->

Blue

Blue Blue Blue Blue Blue Blue

View code:

1
2
3
4
5
6
7
8
<!-- DC 3D Buttons Start -->
<a href="#" class="dc_3d_button blue"> <span class="setting"></span> Blue </a>
<a href="#" class="dc_3d_button blue"> <span class="identity"></span> Blue </a>
<a href="#" class="dc_3d_button blue"> <span class="navigation"></span> Blue </a>
<a href="#" class="dc_3d_button blue"> <span class="gallery"></span> Blue </a>
<a href="#" class="dc_3d_button blue"> <span class="email"></span> Blue </a>
<a href="#" class="dc_3d_button blue"> <span class="users"></span> Blue </a>
<!-- DC 3D Buttons End -->

Red

Red Red Red Red Red Red

View code:

1
2
3
4
5
6
7
8
<!-- DC 3D Buttons Start -->
<a href="#" class="dc_3d_button red"> <span class="calendar"></span> Button </a>
<a href="#" class="dc_3d_button red"> <span class="link"></span> Button </a>
<a href="#" class="dc_3d_button red"> <span class="time"></span> Button </a>
<a href="#" class="dc_3d_button red"> <span class="folder"></span> Button </a>
<a href="#" class="dc_3d_button red"> <span class="tag"></span> Button </a>
<a href="#" class="dc_3d_button red"> <span class="share"></span> Button </a>
<!-- DC 3D Buttons End -->

Black

Black Black Black Black Black Black

View code:

1
2
3
4
5
6
7
8
<!-- DC 3D Buttons Start -->
<a href="#" class="dc_3d_button black"> <span class="edit"></span> Black </a>
<a href="#" class="dc_3d_button black"> <span class="upload"></span> Black </a>
<a href="#" class="dc_3d_button black"> <span class="storage"></span> Black </a>
<a href="#" class="dc_3d_button black"> <span class="photo"></span> Black </a>
<a href="#" class="dc_3d_button black"> <span class="help"></span> Black </a
<a href="#" class="dc_3d_button black"> <span class="comment"></span> Black </a>
<!-- DC 3D Buttons End -->

Green

Green Green Green Green Green Green

View code:

1
2
3
4
5
6
7
8
<!-- DC 3D Buttons Start -->
<a href="#" class="dc_3d_button green"> <span class="like"></span> Green </a>
<a href="#" class="dc_3d_button green"> <span class="phone"></span> Green </a>
<a href="#" class="dc_3d_button green"> <span class="flag"></span> Green </a>
<a href="#" class="dc_3d_button green"> <span class="adduser"></span> Green </a>
<a href="#" class="dc_3d_button green"> <span class="attach"></span> Green </a>
<a href="#" class="dc_3d_button green"> <span class="glass"></span> Green </a>
<!-- DC 3D Buttons End -->


© TemplateAccess