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

Text Buttons

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

1
2
<!-- DC Text Buttons CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/text_buttons/css/dc_text_buttons.css" />

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

1
2
<!-- DC Text Buttons CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/text_buttons/css/dc_text_buttons.css" />

Icons

Love Accept Add

Delete Cross Disk Error

Exclamation RSS Feed Key Finance

Euro Pound Yen Music

PDF File Word Print User

Zoom Thumbs Up Thumbs Down Check

Refresh Right Arrow Left Arrow Comment

Stats Eject Last Start

Pause Play Rewind Fast Forward

Stop Exit Question Lightning

Flink Download Cart Add to Cart

Clear Cart Cart Go Cart In Cart Out

CD Disc Clock Connect Message

Message Send Folder Information Money

Star TV Home Bricks

View code:

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
<!-- DC Text Buttons Start -->
<a class="dc_button3 ico-like" href="#"><span class="icon"></span>Love</a>
<a class="dc_button3 ico-login" href="#"><span class="icon"></span>Lock</a>
<a class="dc_button3 ico-accept" href="#"><span class="icon"></span>Accept</a>
<a class="dc_button3 ico-add" href="#"><span class="icon"></span>Add</a>
<a class="dc_button3 ico-delete" href="#"><span class="icon"></span>Delete</a>
<a class="dc_button3 ico-cross" href="#"><span class="icon"></span>Cross</a>
<a class="dc_button3 ico-disk" href="#"><span class="icon"></span>Disk</a>
<a class="dc_button3 ico-error" href="#"><span class="icon"></span>Error</a>
<a class="dc_button3 ico-exclamation" href="#"><span class="icon"></span>Exclamation</a>
<a class="dc_button3 ico-feed" href="#"><span class="icon"></span>RSS Feed</a>
<a class="dc_button3 ico-key" href="#"><span class="icon"></span>Key</a>
<a class="dc_button3 ico-money_dollar" href="#"><span class="icon"></span>Finance</a>
<a class="dc_button3 ico-money_euro" href="#"><span class="icon"></span>Euro</a>
<a class="dc_button3 ico-money_pound" href="#"><span class="icon"></span>Pound</a>
<a class="dc_button3 ico-money_yen" href="#"><span class="icon"></span>Yen</a>
<a class="dc_button3 ico-music" href="#"><span class="icon"></span>Music</a>
<a class="dc_button3 ico-pdf" href="#"><span class="icon"></span>PDF File</a>
<a class="dc_button3 ico-word" href="#"><span class="icon"></span>Word</a>
<a class="dc_button3 ico-printer" href="#"><span class="icon"></span>Print</a>
<a class="dc_button3 ico-user" href="#"><span class="icon"></span>User</a>
<a class="dc_button3 ico-zoom" href="#"><span class="icon"></span>Zoom</a>
<a class="dc_button3 ico-thumbs_up" href="#"><span class="icon"></span>Thumbs Up</a>
<a class="dc_button3 ico-thumbs_down" href="#"><span class="icon"></span>Thumbs Down</a>
<a class="dc_button3 ico-check" href="#"><span class="icon"></span>Check</a>
<a class="dc_button3 ico-refresh" href="#"><span class="icon"></span>Refresh</a>
<a class="dc_button3 ico-arrow_r" href="#"><span class="icon"></span>Right Arrow</a>
<a class="dc_button3 ico-arrow_l" href="#"><span class="icon"></span>Left Arrow</a>
<a class="dc_button3 ico-comment" href="#"><span class="icon"></span>Comment</a>
<a class="dc_button3 ico-stats" href="#"><span class="icon"></span>Stats</a>
<a class="dc_button3 ico-eject" href="#"><span class="icon"></span>Eject</a>
<a class="dc_button3 ico-to_end" href="#"><span class="icon"></span>Last</a>
<a class="dc_button3 ico-to_start" href="#"><span class="icon"></span>Start</a>
<a class="dc_button3 ico-pause" href="#"><span class="icon"></span>Pause</a>
<a class="dc_button3 ico-play" href="#"><span class="icon"></span>Play</a>
<a class="dc_button3 ico-rwind" href="#"><span class="icon"></span>Rewind</a>
<a class="dc_button3 ico-fforward" href="#"><span class="icon"></span>Fast Forward</a>
<a class="dc_button3 ico-stop" href="#"><span class="icon"></span>Stop</a>
<a class="dc_button3 ico-exit" href="#"><span class="icon"></span>Exit</a>
<a class="dc_button3 ico-question" href="#"><span class="icon"></span>Question</a>
<a class="dc_button3 ico-lightning" href="#"><span class="icon"></span>Lightning</a>
<a class="dc_button3 ico-flink" href="#"><span class="icon"></span>Flink</a>
<a class="dc_button3 ico-download" href="#"><span class="icon"></span>Download</a>
<a class="dc_button3 ico-cart" href="#"><span class="icon"></span>Cart</a>
<a class="dc_button3 ico-cart_add" href="#"><span class="icon"></span>Add to Cart</a>
<a class="dc_button3 ico-cart_del" href="#"><span class="icon"></span>Clear Cart</a>
<a class="dc_button3 ico-cart_go" href="#"><span class="icon"></span>Cart Go</a>
<a class="dc_button3 ico-cart_in" href="#"><span class="icon"></span>Cart In</a>
<a class="dc_button3 ico-cart_out" href="#"><span class="icon"></span>Cart Out</a>
<a class="dc_button3 ico-cd" href="#"><span class="icon"></span>CD Disc</a>
<a class="dc_button3 ico-clock" href="#"><span class="icon"></span>Clock</a>
<a class="dc_button3 ico-connect" href="#"><span class="icon"></span>Connect</a>
<a class="dc_button3 ico-msg" href="#"><span class="icon"></span>Message</a>
<a class="dc_button3 ico-msg_send" href="#"><span class="icon"></span>Message Send</a>
<a class="dc_button3 ico-folder" href="#"><span class="icon"></span>Folder</a>
<a class="dc_button3 ico-information" href="#"><span class="icon"></span>Information</a>
<a class="dc_button3 ico-money" href="#"><span class="icon"></span>Money</a>
<a class="dc_button3 ico-star" href="#"><span class="icon"></span>Star</a>
<a class="dc_button3 ico-tv" href="#"><span class="icon"></span>TV</a>
<a class="dc_button3 ico-home" href="#"><span class="icon"></span>Home</a>
<a class="dc_button3 ico-bricks" href="#"><span class="icon"></span>Bricks</a>
<!-- DC Text Buttons End -->

Colors

Button text Button text Button text Button text

Button text Button text Button text Button text

Button text Button text Button text Button text

Button text Button text Button text Button text

Button text Button text Button text Button text

View code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- DC Text Buttons Start -->
<a class="dc_button3 button_black ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="dc_button3 ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="dc_button3 button_salmon ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="dc_button3 button_dred ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="dc_button3 button_lpurple ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="dc_button3 button_purple ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="dc_button3 button_dpurple ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="dc_button3 button_lblue ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="dc_button3 button_dblue ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="dc_button3 button_cyan ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="dc_button3 button_eletricblue ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="dc_button3 button_lgreen ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="dc_button3 button_dgreen ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="dc_button3 button_lime ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="dc_button3 button_eletricgreen ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="dc_button3 button_yellow ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="dc_button3 button_dyellow ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="dc_button3 button_lorange ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="dc_button3 button_orange ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="dc_button3 button_dorange ico-like" href="#"><span class="icon"></span>Button text</a>
<!-- DC Text Buttons End -->

Variations

Button text Button text Button text textButton text

textButton text Flexible Button Auto Resize Need exxxtra room?

Flexible Button Auto Resize textDynamically Resizes

text100% Flexible Button Button Button

Random TextButton 100% FlexibleButton

View code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- DC Text Buttons Start -->
<a class="dc_button3" href="#">Button text</a>
<a class="dc_button3 ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="dc_button3 ico-like" href="#"><span class="icon iconr"></span>Button text</a>
<a class="dc_button3 noicon" href="#"><span class="icon">text</span>Button text</a>
<a class="dc_button3 noicon" href="#"><span class="icon iconr">text</span>Button text</a>
<a class="dc_button3" href="#">Flexible size? No Problem!</a>
<a class="dc_button3 ico-like" href="#"><span class="icon"></span>Flexible size? No Problem!</a>
<a class="dc_button3 ico-like" href="#"><span class="icon iconr"></span>Flexible size? No Problem!</a>
<a class="dc_button3 noicon" href="#"><span class="icon">text</span>Flexible size? No Problem!</a>
<a class="dc_button3 noicon" href="#"><span class="icon iconr">text</span>Flexible size? No Problem!</a>
<a class="dc_button3" href="#">Button</a>
<a class="dc_button3 ico-like" href="#"><span class="icon"></span>Button</a>
<a class="dc_button3 ico-like" href="#"><span class="icon iconr"></span>Button</a>
<a class="dc_button3 noicon" href="#"><span class="icon">What about here?</span>Button</a>
<a class="dc_button3 noicon" href="#"><span class="icon iconr">No Problem!</span>Button</a>
<!-- DC Text Buttons End -->


© TemplateAccess