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

Gradient Buttons

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

?
1
2
<!-- DC Gradient Buttons CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/gradient_buttons/css/dc_gradient_buttons.css" />

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

?
1
2
<!-- DC Gradient Buttons CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/gradient_buttons/css/dc_gradient_buttons.css" />

Silver

Mini Button     Default Button     Large Button    

Mini Rounded     Default Rounded     Large Rounded    

View code:

?
1
2
3
4
5
6
7
8
<!-- DC Gradient Buttons Start -->
<a href="#" class="dc_gradient_button small">Mini Button</a>
<a href="#" class="dc_gradient_button">Default Button</a>
<a href="#" class="dc_gradient_button large">Large Button</a>
<a href="#" class="dc_gradient_button small rounded">Mini Rounded</a>
<a href="#" class="dc_gradient_button rounded">Default Rounded</a>
<a href="#" class="dc_gradient_button large rounded">Large Rounded</a>
<!-- DC Gradient Buttons End -->

Grey

Mini Button     Default Button     Large Button    

Mini Rounded     Default Rounded     Large Rounded    

View code:

?
1
2
3
4
5
6
7
8
<!-- DC Gradient Buttons Start -->
<a href="#" class="dc_gradient_button small grey">Mini Button</a>
<a href="#" class="dc_gradient_button grey">Default Button</a>
<a href="#" class="dc_gradient_button large grey">Large Button</a>
<a href="#" class="dc_gradient_button small rounded grey">Mini Rounded</a>
<a href="#" class="dc_gradient_button rounded grey">Default Rounded</a>
<a href="#" class="dc_gradient_button 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:

?
1
2
3
4
5
6
7
8
<!-- DC Gradient Buttons Start -->
<a href="#" class="dc_gradient_button small light_blue">Mini Button</a>
<a href="#" class="dc_gradient_button light_blue">Default Button</a>
<a href="#" class="dc_gradient_button large light_blue">Large Button</a>
<a href="#" class="dc_gradient_button small rounded light_blue">Mini Rounded</a>
<a href="#" class="dc_gradient_button rounded light_blue">Default Rounded</a>
<a href="#" class="dc_gradient_button 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:

?
1
2
3
4
5
6
7
8
<!-- DC Gradient Buttons Start -->
<a href="#" class="dc_gradient_button small blue">Mini Button</a>
<a href="#" class="dc_gradient_button blue">Default Button</a>
<a href="#" class="dc_gradient_button large blue">Large Button</a>
<a href="#" class="dc_gradient_button small rounded blue">Mini Rounded</a>
<a href="#" class="dc_gradient_button rounded blue">Default Rounded</a>
<a href="#" class="dc_gradient_button 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:

?
1
2
3
4
5
6
7
8
<!-- DC Gradient Buttons Start -->
<a href="#" class="dc_gradient_button small green">Mini Button</a>
<a href="#" class="dc_gradient_button green">Default Button</a>
<a href="#" class="dc_gradient_button large green">Large Button</a>
<a href="#" class="dc_gradient_button small rounded green">Mini Rounded</a>
<a href="#" class="dc_gradient_button rounded green">Default Rounded</a>
<a href="#" class="dc_gradient_button 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:

?
1
2
3
4
5
6
7
8
<!-- DC Gradient Buttons Start -->
<a href="#" class="dc_gradient_button small yellow">Mini Button</a>
<a href="#" class="dc_gradient_button yellow">Default Button</a>
<a href="#" class="dc_gradient_button large yellow">Large Button</a>
<a href="#" class="dc_gradient_button small rounded yellow">Mini Rounded</a>
<a href="#" class="dc_gradient_button rounded yellow">Default Rounded</a>
<a href="#" class="dc_gradient_button 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:

?
1
2
3
4
5
6
7
8
<!-- DC Gradient Buttons Start -->
<a href="#" class="dc_gradient_button small orange">Mini Button</a>
<a href="#" class="dc_gradient_button orange">Default Button</a>
<a href="#" class="dc_gradient_button large orange">Large Button</a>
<a href="#" class="dc_gradient_button small rounded orange">Mini Rounded</a>
<a href="#" class="dc_gradient_button rounded orange">Default Rounded</a>
<a href="#" class="dc_gradient_button 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:

?
1
2
3
4
5
6
7
8
<!-- DC Gradient Buttons Start -->
<a href="#" class="dc_gradient_button small red">Mini Button</a>
<a href="#" class="dc_gradient_button red">Default Button</a>
<a href="#" class="dc_gradient_button large red">Large Button</a>
<a href="#" class="dc_gradient_button small rounded red">Mini Rounded</a>
<a href="#" class="dc_gradient_button rounded red">Default Rounded</a>
<a href="#" class="dc_gradient_button 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:

?
1
2
3
4
5
6
7
8
<!-- DC Gradient Buttons Start -->
<a href="#" class="dc_gradient_button small pink">Mini Button</a>
<a href="#" class="dc_gradient_button pink">Default Button</a>
<a href="#" class="dc_gradient_button large pink">Large Button</a>
<a href="#" class="dc_gradient_button small rounded pink">Mini Rounded</a>
<a href="#" class="dc_gradient_button rounded pink">Default Rounded</a>
<a href="#" class="dc_gradient_button 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:

?
1
2
3
4
5
6
7
8
<!-- DC Gradient Buttons Start -->
<a href="#" class="dc_gradient_button small purple">Mini Button</a>
<a href="#" class="dc_gradient_button purple">Default Button</a>
<a href="#" class="dc_gradient_button large purple">Large Button</a>
<a href="#" class="dc_gradient_button small rounded purple">Mini Rounded</a>
<a href="#" class="dc_gradient_button rounded purple">Default Rounded</a>
<a href="#" class="dc_gradient_button 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:

?
1
2
3
4
5
6
7
8
<!-- DC Gradient Buttons Start -->
<a href="#" class="dc_gradient_button small black">Mini Button</a>
<a href="#" class="dc_gradient_button black">Default Button</a>
<a href="#" class="dc_gradient_button large black">Large Button</a>
<a href="#" class="dc_gradient_button small rounded black">Mini Rounded</a>
<a href="#" class="dc_gradient_button rounded black">Default Rounded</a>
<a href="#" class="dc_gradient_button large rounded black">Large Rounded</a>
<!-- DC Gradient Buttons End -->


© TemplateAccess