Custom Buttons

Click to preview the Custom Buttons demo. View demo

Button Style 01

Code:

<a class="dg-btn-1 radius-3px btn-accent" href="#">Default</a>
<a class="dg-btn-1 radius-3px btn-primary" href="#">Primary</a>
<a class="dg-btn-1 radius-3px btn-success" href="#">Success</a>
<a class="dg-btn-1 radius-3px btn-info" href="#">Info</a>
<a class="dg-btn-1 radius-3px btn-warning" href="#">Warning</a>
<a class="dg-btn-1 radius-3px btn-danger" href="#">Danger</a>
<a class="dg-btn-1 radius-3px btn-accent" href="#"><span class="fa fa-shopping-cart"></span></a>
<a class="dg-btn-1 radius-3px btn-accent" href="#"><span class="fa fa-cloud-download mr"></span> Default Size</a>

<a class="dg-btn-1 btn-accent" href="#">Default</a>
<a class="dg-btn-1 btn-primary" href="#">Primary</a>
<a class="dg-btn-1 btn-success" href="#">Success</a>
<a class="dg-btn-1 btn-info" href="#">Info</a>
<a class="dg-btn-1 btn-warning" href="#">Warning</a>
<a class="dg-btn-1 btn-danger" href="#">Danger</a>
<a class="dg-btn-1 btn-accent" href="#"><span class="fa fa-shopping-cart"></span></a>
<a class="dg-btn-1 btn-accent" href="#"><span class="fa fa-cloud-download mr"></span>Default Size</a>

Button Style 02

Code:

<a class="dg-btn-2 radius-3px btn-accent" href="#">Default</a>
<a class="dg-btn-2 radius-3px btn-primary" href="#">Primary</a>
<a class="dg-btn-2 radius-3px btn-success" href="#">Success</a>
<a class="dg-btn-2 radius-3px btn-info" href="#">Info</a>
<a class="dg-btn-2 radius-3px btn-warning" href="#">Warning</a>
<a class="dg-btn-2 radius-3px btn-danger" href="#">Danger</a>
<a class="dg-btn-2 radius-3px btn-accent" href="#"><span class="fa fa-shopping-cart"></span></a>
<a class="dg-btn-2 radius-3px btn-accent" href="#"><span class="fa fa-clock-o mr"></span>Default Size</a>

Button Style 03

Code:

<a class="dg-btn-2 btn-accent" href="#">Default</a>
<a class="dg-btn-2 btn-primary" href="#">Primary</a>
<a class="dg-btn-2 btn-success" href="#">Success</a>
<a class="dg-btn-2 btn-info" href="#">Info</a>
<a class="dg-btn-2 btn-warning" href="#">Warning</a>
<a class="dg-btn-2 btn-danger" href="#">Danger</a>
<a class="dg-btn-2 btn-accent" href="#"><span class="fa fa-shopping-cart"></span></a>
<a class="dg-btn-2 btn-accent" href="#"><span class="fa fa-clock-o mr"></span>Default Size</a>

Button Style 04

Code:

<a class="dg-btn-4 radius-3px btn-accent" href="#">Default</a>
<a class="dg-btn-4 radius-3px btn-primary" href="#">Primary</a>
<a class="dg-btn-4 radius-3px btn-success" href="#">Success</a>
<a class="dg-btn-4 radius-3px btn-info" href="#">Info</a>
<a class="dg-btn-4 radius-3px btn-warning" href="#">Warning</a>
<a class="dg-btn-4 radius-3px btn-danger" href="#">Danger</a>
<a class="dg-btn-4 radius-3px btn-accent" href="#"><span class="fa fa-shopping-cart"></span></a>
<a class="dg-btn-4 radius-3px btn-accent" href="#"><span class="fa fa-cloud-download mr"></span>Default Size</a>

Button Style 05

Code:

<a class="dg-btn-1 btn-borland-g" href="#">Default</a>
<a class="dg-btn-1 btn-primary-g" href="#">Primary</a>
<a class="dg-btn-1 btn-success-g" href="#">Success</a>
<a class="dg-btn-1 btn-info-g" href="#">Info</a>
<a class="dg-btn-1 btn-warning-g" href="#">Warning</a>
<a class="dg-btn-1 btn-danger-g" href="#">Danger</a>
<a class="dg-btn-1 btn-borland-g" href="#"><span class="fa fa-shopping-cart"></span></a>
<a class="dg-btn-1 btn-borland-g" href="#"><span class="fa fa-cloud-download mr"></span>Default Size</a>

Button Style 06

Code:

<a class="dg-btn-3 radius-3px btn-accent" href="#">Default</a>
<a class="dg-btn-3 radius-3px btn-primary" href="#">Primary</a>
<a class="dg-btn-3 radius-3px btn-success" href="#">Success</a>
<a class="dg-btn-3 radius-3px btn-info" href="#">Info</a>
<a class="dg-btn-3 radius-3px btn-warning" href="#">Warning</a>
<a class="dg-btn-3 radius-3px btn-danger" href="#">Danger</a>
<a class="dg-btn-3 radius-3px btn-accent" href="#"><span class="fa fa-shopping-cart"></span></a>
<a class="dg-btn-3 radius-3px btn-accent" href="#"><span class="fa fa-cloud-download mr"></span> Default Size</a>

Button Style 07

Code:

<a class="dg-btn-5 btn-accent" href="#">Default</a>
<a class="dg-btn-5 btn-primary" href="#">Primary</a>
<a class="dg-btn-5 btn-success" href="#">Success</a>
<a class="dg-btn-5 btn-info" href="#">Info</a>
<a class="dg-btn-5 btn-warning" href="#">Warning</a>
<a class="dg-btn-5 btn-danger" href="#">Danger</a>
<a class="dg-btn-5 btn-accent" href="#"><span class="fa fa-shopping-cart"></span></a>
<a class="dg-btn-5 btn-accent" href="#"><span class="fa fa-cloud-download mr"></span>Default Size</a>

Button Style 08

Code:

<a class="dg-btn-1 btn-accent size-xs" href="#">Extra Small Size</a>
<a class="dg-btn-1 btn-accent size-sm" href="#">Small Size</a>
<a class="dg-btn-1 btn-accent" href="#">Default Size</a>
<a class="dg-btn-1 btn-accent size-lg" href="#">Large Size</a>
<a class="dg-btn-1 btn-accent size-xl" href="#">Extra Large Size</a>

Button Size

Code:

<a class="dg-btn-2 btn-accent" href="#">Border 1px</a>
<a class="dg-btn-2 btn-accent border-2px" href="#">Border 2px</a>
<a class="dg-btn-2 btn-accent border-3px" href="#">Border 3px</a>
<a class="dg-btn-2 btn-accent border-4px" href="#">Border 4px</a>
<a class="dg-btn-2 btn-accent border-5px" href="#">Border 5px</a>
<a class="dg-btn-2 btn-accent border-6px" href="#">Border 6px</a>

Button Border Size

Code:

<a class="dg-btn-2 btn-accent" href="#">Rectangle</a>
<a class="dg-btn-2 btn-accent radius-3px" href="#">Radius 3px</a>
<a class="dg-btn-2 btn-accent radius-5px" href="#">Radius 5px</a>
<a class="dg-btn-2 btn-accent radius-6px" href="#">Radius 6px</a>
<a class="dg-btn-2 btn-accent radius-10px" href="#">Radius 10px</a>
<a class="dg-btn-2 btn-accent radius-15px" href="#">Radius 15px</a>
<a class="dg-btn-2 btn-accent radius-semi-circle" href="#">Semi circle</a>

Button Radius Size

Code:

<a class="dg-btn-1 btn-turquoise" href="#">Button</a>
<a class="dg-btn-1 btn-borland" href="#">Button</a>
<a class="dg-btn-1 btn-denim" href="#">Button</a>
<a class="dg-btn-1 btn-gray" href="#">Button</a>
<a class="dg-btn-1 btn-black" href="#">Button</a>
<a class="dg-btn-1 btn-night" href="#">Button</a>
<a class="dg-btn-1 btn-emerald" href="#">Button</a>
<a class="dg-btn-1 btn-orange" href="#">Button</a>
<a class="dg-btn-1 btn-chambray" href="#">Button</a>
<a class="dg-btn-1 btn-bittersweet" href="#">Button</a>
<a class="dg-btn-1 btn-pelorous" href="#">Button</a>
<a class="dg-btn-1 btn-citrus" href="#">Button</a>
<a class="dg-btn-1 btn-blackberry" href="#">Button</a>
<a class="dg-btn-1 btn-melon" href="#">Button</a>
<a class="dg-btn-1 btn-lipstick" href="#">Button</a>
<a class="dg-btn-1 btn-darkcyan" href="#">Button</a>
<a class="dg-btn-1 btn-toryblue" href="#">Button</a>
<a class="dg-btn-1 btn-crimson" href="#">Button</a>
<a class="dg-btn-1 btn-celery" href="#">Button</a>
<a class="dg-btn-1 btn-pink" href="#">Button</a>
<a class="dg-btn-1 btn-citrus2" href="#">Button</a>
<a class="dg-btn-1 btn-comet" href="#">Button</a>
<a class="dg-btn-1 btn-atomic" href="#">Button</a>
<a class="dg-btn-1 btn-seagreen" href="#">Button</a>
<a class="dg-btn-1 btn-shadowgreen" href="#">Button</a>
<a class="dg-btn-1 btn-silver" href="#">Button</a>
<a class="dg-btn-1 btn-acapulco" href="#">Button</a>
<a class="dg-btn-1 btn-rock" href="#">Button</a>
<a class="dg-btn-1 btn-midnightblue" href="#">Button</a>
<a class="dg-btn-1 btn-darkturquoise" href="#">Button</a>
<a class="dg-btn-1 btn-radicalred" href="#">Button</a>
<a class="dg-btn-1 btn-cadetblue" href="#">Button</a>
<a class="dg-btn-1 btn-sunshade" href="#">Button</a>
<a class="dg-btn-1 btn-blackberry" href="#">Button</a>
<a class="dg-btn-1 btn-mantis" href="#">Button</a>
<a class="dg-btn-1 btn-saffron" href="#">Button</a>
<a class="dg-btn-1 btn-shamrock" href="#">Button</a>
<a class="dg-btn-1 btn-orange2" href="#">Button</a>
<a class="dg-btn-1 btn-primary" href="#">Button</a>
<a class="dg-btn-1 btn-success" href="#">Button</a>
<a class="dg-btn-1 btn-info" href="#">Button</a>
<a class="dg-btn-1 btn-warning" href="#">Button</a>
<a class="dg-btn-1 btn-danger" href="#">Button</a>
<a class="dg-btn-1 btn-turquoise-g" href="#">Button</a>
<a class="dg-btn-1 btn-navyblue-g" href="#">Button</a>
<a class="dg-btn-1 btn-blue-g" href="#">Button</a>
<a class="dg-btn-1 btn-jewel-g" href="#">Button</a>
<a class="dg-btn-1 btn-borland-g" href="#">Button</a>
<a class="dg-btn-1 btn-primary-g" href="#">Button</a>
<a class="dg-btn-1 btn-success-g" href="#">Button</a>
<a class="dg-btn-1 btn-info-g" href="#">Button</a>
<a class="dg-btn-1 btn-warning-g" href="#">Button</a>
<a class="dg-btn-1 btn-danger-g" href="#">Button</a>
<a class="dg-btn-1 btn-accent" href="#">Button</a>

Button Color

Code:

<a class="dg-btn-1 btn-gray hover-turquoise" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-borland" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-denim" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-gray" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-black" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-night" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-emerald" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-orange" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-chambray" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-bittersweet" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-pelorous" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-citrus" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-blackberry" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-melon" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-lipstick" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-darkcyan" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-toryblue" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-crimson" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-celery" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-pink" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-citrus2" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-comet" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-atomic" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-seagreen" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-shadowgreen" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-silver" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-acapulco" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-rock" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-midnightblue" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-darkturquoise" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-radicalred" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-cadetblue" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-sunshade" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-blackberry" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-mantis" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-saffron" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-shamrock" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-orange2" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-primary" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-success" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-info" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-warning" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-danger" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-turquoise-g" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-navyblue-g" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-blue-g" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-jewel-g" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-borland-g" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-primary-g" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-success-g" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-info-g" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-warning-g" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-danger-g" href="#">Button</a>
<a class="dg-btn-1 btn-gray hover-accent" href="#">Button</a>