CSS3 Buttons

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


<!-- DC CSS3 Buttons CSS -->
<link type="text/css" rel="stylesheet" href="dreamcodes/buttons_css3/css/tsc_button_styles.css" />

Small Link Buttons <a href>

Black Blue Purple Green Teal Magenta Red Orange Yellow Gray White

View code:


<!-- DC CSS3 Buttons Start -->
<a class="tsc_c3b_small tsc_button" href="#"><span>Black</span></a>
<a class="tsc_c3b_small tsc_c3b_blue tsc_button" href="#"><span>Blue</span></a> 
<a class="tsc_c3b_small tsc_c3b_purple tsc_button" href="#"><span>Purple</span></a> 
<a class="tsc_c3b_small tsc_c3b_green tsc_button" href="#"><span>Green</span></a> 
<a class="tsc_c3b_small tsc_c3b_teal tsc_button" href="#"><span>Teal</span></a> 
<a class="tsc_c3b_small tsc_c3b_magenta tsc_button" href="#"><span>Magenta</span></a> 
<a class="tsc_c3b_small tsc_c3b_red tsc_button" href="#"><span>Red</span></a> 
<a class="tsc_c3b_small tsc_c3b_orange tsc_button" href="#"><span>Orange</span></a> 
<a class="tsc_c3b_small tsc_c3b_yellow tsc_button" href="#"><span>Yellow</span></a> 
<a class="tsc_c3b_small tsc_c3b_gray tsc_button" href="#"><span>Gray</span></a> 
<a class="tsc_c3b_small tsc_c3b_white tsc_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:


<!-- DC CSS3 Buttons Start -->
<a class="tsc_c3b_large tsc_button" href="#"><span>Black</span></a>
<a class="tsc_c3b_large tsc_c3b_blue tsc_button" href="#"><span>Blue</span></a>
<a class="tsc_c3b_large tsc_c3b_purple tsc_button" href="#"><span>Purple</span></a>
<a class="tsc_c3b_large tsc_c3b_green tsc_button" href="#"><span>Green</span></a>
<a class="tsc_c3b_large tsc_c3b_teal tsc_button" href="#"><span>Teal</span></a>
<a class="tsc_c3b_large tsc_c3b_magenta tsc_button" href="#"><span>Magenta</span></a>
<a class="tsc_c3b_large tsc_c3b_red tsc_button" href="#"><span>Red</span></a>
<a class="tsc_c3b_large tsc_c3b_orange tsc_button" href="#"><span>Orange</span></a>
<a class="tsc_c3b_large tsc_c3b_yellow tsc_button" href="#"><span>Yellow</span></a>
<a class="tsc_c3b_large tsc_c3b_gray tsc_button" href="#"><span>Gray</span></a>
<a class="tsc_c3b_large tsc_c3b_white tsc_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:


<!-- DC CSS3 Buttons Start -->
<a class="tsc_c3b_large tsc_button tsc_c3b_download" href="#"><span>Download <tsc_c3b_small>(8 MB)</small></span></a>
<a class="tsc_c3b_large tsc_c3b_blue tsc_button tsc_c3b_download" href="#"><span>Download <small>(8 MB)</small></span></a>
<a class="tsc_c3b_large tsc_c3b_purple tsc_button tsc_c3b_dlLight" href="#"><span>Download <small>(8 MB)</small></span></a>
<a class="tsc_c3b_large tsc_c3b_green tsc_button tsc_c3b_dlLight" href="#"><span>Download <small>(8 MB)</small></span></a>
<a class="tsc_c3b_large tsc_c3b_teal tsc_button tsc_c3b_dlLight" href="#"><span>Download <small>(8 MB)</small></span></a>
<a class="tsc_c3b_large tsc_c3b_magenta tsc_button tsc_c3b_dlLight" href="#"><span>Download <small>(8 MB)</small></span></a>
<a class="tsc_c3b_large tsc_c3b_red tsc_button tsc_c3b_dlLight" href="#"><span>Download <small>(8 MB)</small></span></a>
<a class="tsc_c3b_large tsc_c3b_orange tsc_button tsc_c3b_dlLight" href="#"><span>Download <small>(8 MB)</small></span></a>
<a class="tsc_c3b_large tsc_c3b_yellow tsc_button tsc_c3b_dlLight" href="#"><span>Download <small>(8 MB)</small></span></a>
<a class="tsc_c3b_large tsc_c3b_gray tsc_button tsc_c3b_dlDark" href="#"><span>Download <small>(8 MB)</small></span></a>
<a class="tsc_c3b_large tsc_c3b_white tsc_button tsc_c3b_download" href="#"><span>Download <small>(8 MB)</small></span></a>
<!-- DC CSS3 Buttons End -->

Small Submit Buttons <input>

View code:


<!-- DC CSS3 Buttons Start -->
<input type="submit" class="tsc_c3b_small tsc_button tsc_c3b_input" value="Black" />
<input type="submit" class="tsc_c3b_small tsc_button tsc_c3b_blue tsc_c3b_input" value="Blue" />
<input type="submit" class="tsc_c3b_small tsc_button tsc_c3b_purple tsc_c3b_input" value="Purple" />
<input type="submit" class="tsc_c3b_small tsc_button tsc_c3b_green tsc_c3b_input" value="Green" />
<input type="submit" class="tsc_c3b_small tsc_button tsc_c3b_teal tsc_c3b_input" value="Teal" />
<input type="submit" class="tsc_c3b_small tsc_button tsc_c3b_magenta tsc_c3b_input" value="Magenta" />
<input type="submit" class="tsc_c3b_small tsc_button tsc_c3b_red tsc_c3b_input" value="Red" />
<input type="submit" class="tsc_c3b_small tsc_button tsc_c3b_orange tsc_c3b_input" value="Orange" />
<input type="submit" class="tsc_c3b_small tsc_button tsc_c3b_yellow tsc_c3b_input" value="Yellow" />
<input type="submit" class="tsc_c3b_small tsc_button tsc_c3b_gray tsc_c3b_input" value="Gray" />
<input type="submit" class="tsc_c3b_small tsc_button tsc_c3b_white tsc_c3b_input" value="White" />
<!-- DC CSS3 Buttons End -->

Large Submit Buttons <input>

View code:


<!-- DC CSS3 Buttons Start -->
<input type="submit" class="tsc_c3b_large tsc_button tsc_c3b_input" value="Black" />
<input type="submit" class="tsc_c3b_large tsc_button tsc_c3b_blue tsc_c3b_input" value="Blue" />
<input type="submit" class="tsc_c3b_large tsc_button tsc_c3b_purple tsc_c3b_input" value="Purple" />
<input type="submit" class="tsc_c3b_large tsc_button tsc_c3b_green tsc_c3b_input" value="Green" />
<input type="submit" class="tsc_c3b_large tsc_button tsc_c3b_teal tsc_c3b_input" value="Teal" />
<input type="submit" class="tsc_c3b_large tsc_button tsc_c3b_magenta tsc_c3b_input" value="Magenta" />
<input type="submit" class="tsc_c3b_large tsc_button tsc_c3b_red tsc_c3b_input" value="Red" />
<input type="submit" class="tsc_c3b_large tsc_button tsc_c3b_orange tsc_c3b_input" value="Orange" />
<input type="submit" class="tsc_c3b_large tsc_button tsc_c3b_yellow tsc_c3b_input" value="Yellow" />
<input type="submit" class="tsc_c3b_large tsc_button tsc_c3b_gray tsc_c3b_input" value="Gray" />
<input type="submit" class="tsc_c3b_large tsc_button tsc_c3b_white tsc_c3b_input" value="White" />
<!-- DC CSS3 Buttons End -->

Small Buttons <button>

View code:


<!-- DC CSS3 Buttons Start -->
<button class="tsc_c3b_small tsc_button"><span>Black</span></button>
<button class="tsc_c3b_small tsc_c3b_blue tsc_button"><span>Blue</span></button>
<button class="tsc_c3b_small tsc_c3b_purple tsc_button"><span>Purple</span></button>
<button class="tsc_c3b_small tsc_c3b_green tsc_button"><span>Green</span></button>
<button class="tsc_c3b_small tsc_c3b_teal tsc_button"><span>Teal</span></button>
<button class="tsc_c3b_small tsc_c3b_magenta tsc_button"><span>Magenta</span></button>
<button class="tsc_c3b_small tsc_c3b_red tsc_button"><span>Red</span></button>
<button class="tsc_c3b_small tsc_c3b_orange tsc_button"><span>Orange</span></button>
<button class="tsc_c3b_small tsc_c3b_yellow tsc_button"><span>Yellow</span></button>
<button class="tsc_c3b_small tsc_c3b_gray tsc_button"><span>Gray</span></button>
<button class="tsc_c3b_small tsc_c3b_white tsc_button"><span>White</span></button>
<!-- DC CSS3 Buttons End -->

Large Buttons <button>

View code:


<!-- DC CSS3 Buttons Start -->
<button class="tsc_c3b_large tsc_button"><span>Black</span></button>
<button class="tsc_c3b_large tsc_c3b_blue tsc_button"><span>Blue</span></button>
<button class="tsc_c3b_large tsc_c3b_purple tsc_button"><span>Purple</span></button>
<button class="tsc_c3b_large tsc_c3b_green tsc_button"><span>Green</span></button>
<button class="tsc_c3b_large tsc_c3b_teal tsc_button"><span>Teal</span></button>
<button class="tsc_c3b_large tsc_c3b_magenta tsc_button"><span>Magenta</span></button>
<button class="tsc_c3b_large tsc_c3b_red tsc_button"><span>Red</span></button>
<button class="tsc_c3b_large tsc_c3b_orange tsc_button"><span>Orange</span></button>
<button class="tsc_c3b_large tsc_c3b_yellow tsc_button"><span>Yellow</span></button>
<button class="tsc_c3b_large tsc_c3b_gray tsc_button"><span>Gray</span></button>
<button class="tsc_c3b_large tsc_c3b_white tsc_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:


<!-- DC CSS3 Buttons Start -->
<a class="tall tsc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<a class="tall tsc_c3b_blue tsc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<a class="tall tsc_c3b_purple tsc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<a class="tall tsc_c3b_green tsc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<a class="tall tsc_c3b_teal tsc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<a class="tall tsc_c3b_magenta tsc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<a class="tall tsc_c3b_red tsc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<a class="tall tsc_c3b_orange tsc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<a class="tall tsc_c3b_yellow tsc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<a class="tall tsc_c3b_gray tsc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<a class="tall tsc_c3b_white tsc_button" href="#"><span>Click This<em>Try it today for free!</em></span></a>
<!-- DC CSS3 Buttons End -->