Gradient Buttons

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


<!-- DC Gradient Buttons CSS -->
<link type="text/css" rel="stylesheet" href="dreamcodes/gradient_buttons/css/tsc_gradient_buttons.css" />

          

Silver

Mini Button     Default Button     Large Button    

Mini Rounded     Default Rounded     Large Rounded    

View code:


<!-- DC Gradient Buttons Start -->
<a href="#" class="tsc_buttons2 small">Mini Button</a>
<a href="#" class="tsc_buttons2">Default Button</a>
<a href="#" class="tsc_buttons2 large">Large Button</a>
<a href="#" class="tsc_buttons2 small rounded">Mini Rounded</a>
<a href="#" class="tsc_buttons2 rounded">Default Rounded</a>
<a href="#" class="tsc_buttons2 large rounded">Large Rounded</a>
<!-- DC Gradient Buttons End -->

          

Grey

Mini Button     Default Button     Large Button    

Mini Rounded     Default Rounded     Large Rounded    

View code:


<!-- DC Gradient Buttons Start -->
<a href="#" class="tsc_buttons2 small grey">Mini Button</a>
<a href="#" class="tsc_buttons2 grey">Default Button</a>
<a href="#" class="tsc_buttons2 large grey">Large Button</a>
<a href="#" class="tsc_buttons2 small rounded grey">Mini Rounded</a>
<a href="#" class="tsc_buttons2 rounded grey">Default Rounded</a>
<a href="#" class="tsc_buttons2 large rounded grey">Large Rounded</a>
<!-- DC Gradient Buttons End -->

          

Light blue

Mini Button     Default Button     Large Button    

Mini Rounded     Default Rounded     Large Rounded    

View code:


<!-- DC Gradient Buttons Start -->
<a href="#" class="tsc_buttons2 small light_blue">Mini Button</a>
<a href="#" class="tsc_buttons2 light_blue">Default Button</a>
<a href="#" class="tsc_buttons2 large light_blue">Large Button</a>
<a href="#" class="tsc_buttons2 small rounded light_blue">Mini Rounded</a>
<a href="#" class="tsc_buttons2 rounded light_blue">Default Rounded</a>
<a href="#" class="tsc_buttons2 large rounded light_blue">Large Rounded</a>
<!-- DC Gradient Buttons End -->

          

Blue

Mini Button     Default Button     Large Button    

Mini Rounded     Default Rounded     Large Rounded    

View code:


<!-- DC Gradient Buttons Start -->
<a href="#" class="tsc_buttons2 small blue">Mini Button</a>
<a href="#" class="tsc_buttons2 blue">Default Button</a>
<a href="#" class="tsc_buttons2 large blue">Large Button</a>
<a href="#" class="tsc_buttons2 small rounded blue">Mini Rounded</a>
<a href="#" class="tsc_buttons2 rounded blue">Default Rounded</a>
<a href="#" class="tsc_buttons2 large rounded blue">Large Rounded</a>
<!-- DC Gradient Buttons End -->

          

Green

Mini Button     Default Button     Large Button    

Mini Rounded     Default Rounded     Large Rounded    

View code:


<!-- DC Gradient Buttons Start -->
<a href="#" class="tsc_buttons2 small green">Mini Button</a>
<a href="#" class="tsc_buttons2 green">Default Button</a>
<a href="#" class="tsc_buttons2 large green">Large Button</a>
<a href="#" class="tsc_buttons2 small rounded green">Mini Rounded</a>
<a href="#" class="tsc_buttons2 rounded green">Default Rounded</a>
<a href="#" class="tsc_buttons2 large rounded green">Large Rounded</a>
<!-- DC Gradient Buttons End -->

          

Yellow

Mini Button     Default Button     Large Button    

Mini Rounded     Default Rounded     Large Rounded    

View code:


<!-- DC Gradient Buttons Start -->
<a href="#" class="tsc_buttons2 small yellow">Mini Button</a>
<a href="#" class="tsc_buttons2 yellow">Default Button</a>
<a href="#" class="tsc_buttons2 large yellow">Large Button</a>
<a href="#" class="tsc_buttons2 small rounded yellow">Mini Rounded</a>
<a href="#" class="tsc_buttons2 rounded yellow">Default Rounded</a>
<a href="#" class="tsc_buttons2 large rounded yellow">Large Rounded</a>
<!-- DC Gradient Buttons End -->

          

Orange

Mini Button     Default Button     Large Button    

Mini Rounded     Default Rounded     Large Rounded    

View code:


<!-- DC Gradient Buttons Start -->
<a href="#" class="tsc_buttons2 small orange">Mini Button</a>
<a href="#" class="tsc_buttons2 orange">Default Button</a>
<a href="#" class="tsc_buttons2 large orange">Large Button</a>
<a href="#" class="tsc_buttons2 small rounded orange">Mini Rounded</a>
<a href="#" class="tsc_buttons2 rounded orange">Default Rounded</a>
<a href="#" class="tsc_buttons2 large rounded orange">Large Rounded</a>
<!-- DC Gradient Buttons End -->

          

Red

Mini Button     Default Button     Large Button    

Mini Rounded     Default Rounded     Large Rounded    

View code:


<!-- DC Gradient Buttons Start -->
<a href="#" class="tsc_buttons2 small red">Mini Button</a>
<a href="#" class="tsc_buttons2 red">Default Button</a>
<a href="#" class="tsc_buttons2 large red">Large Button</a>
<a href="#" class="tsc_buttons2 small rounded red">Mini Rounded</a>
<a href="#" class="tsc_buttons2 rounded red">Default Rounded</a>
<a href="#" class="tsc_buttons2 large rounded red">Large Rounded</a>
<!-- DC Gradient Buttons End -->

          

Pink

Mini Button     Default Button     Large Button    

Mini Rounded     Default Rounded     Large Rounded    

View code:


<!-- DC Gradient Buttons Start -->
<a href="#" class="tsc_buttons2 small pink">Mini Button</a>
<a href="#" class="tsc_buttons2 pink">Default Button</a>
<a href="#" class="tsc_buttons2 large pink">Large Button</a>
<a href="#" class="tsc_buttons2 small rounded pink">Mini Rounded</a>
<a href="#" class="tsc_buttons2 rounded pink">Default Rounded</a>
<a href="#" class="tsc_buttons2 large rounded pink">Large Rounded</a>
<!-- DC Gradient Buttons End -->

          

Purple

Mini Button     Default Button     Large Button    

Mini Rounded     Default Rounded     Large Rounded    

View code:


<!-- DC Gradient Buttons Start -->
<a href="#" class="tsc_buttons2 small purple">Mini Button</a>
<a href="#" class="tsc_buttons2 purple">Default Button</a>
<a href="#" class="tsc_buttons2 large purple">Large Button</a>
<a href="#" class="tsc_buttons2 small rounded purple">Mini Rounded</a>
<a href="#" class="tsc_buttons2 rounded purple">Default Rounded</a>
<a href="#" class="tsc_buttons2 large rounded purple">Large Rounded</a>
<!-- DC Gradient Buttons End -->

          

Black

Mini Button     Default Button     Large Button    

Mini Rounded     Default Rounded     Large Rounded    

View code:


<!-- DC Gradient Buttons Start -->
<a href="#" class="tsc_buttons2 small black">Mini Button</a>
<a href="#" class="tsc_buttons2 black">Default Button</a>
<a href="#" class="tsc_buttons2 large black">Large Button</a>
<a href="#" class="tsc_buttons2 small rounded black">Mini Rounded</a>
<a href="#" class="tsc_buttons2 rounded black">Default Rounded</a>
<a href="#" class="tsc_buttons2 large rounded black">Large Rounded</a>
<!-- DC Gradient Buttons End -->

          


© TemplateAccess