Text Buttons

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


<!-- DC Text Buttons CSS -->
<link type="text/css" rel="stylesheet" href="dreamcodes/text_buttons/css/tsc_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:


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


<!-- DC Text Buttons Start -->
<a class="tsc_button3 button_black ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="tsc_button3 ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="tsc_button3 button_salmon ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="tsc_button3 button_dred ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="tsc_button3 button_lpurple ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="tsc_button3 button_purple ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="tsc_button3 button_dpurple ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="tsc_button3 button_lblue ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="tsc_button3 button_dblue ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="tsc_button3 button_cyan ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="tsc_button3 button_eletricblue ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="tsc_button3 button_lgreen ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="tsc_button3 button_dgreen ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="tsc_button3 button_lime ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="tsc_button3 button_eletricgreen ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="tsc_button3 button_yellow ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="tsc_button3 button_dyellow ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="tsc_button3 button_lorange ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="tsc_button3 button_orange ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="tsc_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:


<!-- DC Text Buttons Start -->
<a class="tsc_button3" href="#">Button text</a>
<a class="tsc_button3 ico-like" href="#"><span class="icon"></span>Button text</a>
<a class="tsc_button3 ico-like" href="#"><span class="icon iconr"></span>Button text</a>
<a class="tsc_button3 noicon" href="#"><span class="icon">text</span>Button text</a>
<a class="tsc_button3 noicon" href="#"><span class="icon iconr">text</span>Button text</a>
<a class="tsc_button3" href="#">Flexible size? No Problem!</a>
<a class="tsc_button3 ico-like" href="#"><span class="icon"></span>Flexible size? No Problem!</a>
<a class="tsc_button3 ico-like" href="#"><span class="icon iconr"></span>Flexible size? No Problem!</a>
<a class="tsc_button3 noicon" href="#"><span class="icon">text</span>Flexible size? No Problem!</a>
<a class="tsc_button3 noicon" href="#"><span class="icon iconr">text</span>Flexible size? No Problem!</a>
<a class="tsc_button3" href="#">Button</a>
<a class="tsc_button3 ico-like" href="#"><span class="icon"></span>Button</a>
<a class="tsc_button3 ico-like" href="#"><span class="icon iconr"></span>Button</a>
<a class="tsc_button3 noicon" href="#"><span class="icon">What about here?</span>Button</a>
<a class="tsc_button3 noicon" href="#"><span class="icon iconr">No Problem!</span>Button</a>
<!-- DC Text Buttons End -->

          


© TemplateAccess