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

Social Buttons

Button styles from popular sites.

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

?
1
2
<!-- DC Social Buttons CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/social_buttons/css/dc_social_buttons.css" />

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

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

Facebook Style

Silver Button   Purple Button   Green Button   Red Button   Black Button

View code:

?
1
2
3
4
5
6
7
<!-- DC Social Buttons Start -->
<a href="#" class="dc_fb_button">Silver Button</a>
<a href="#" class="dc_fb_button purple">Purple Button</a>
<a href="#" class="dc_fb_button green">Green Button</a>
<a href="#" class="dc_fb_button red">Red Button</a>
<a href="#" class="dc_fb_button black">Black Button</a>
<!-- DC Social Buttons End -->

Google + Microsoft Style

White Button    Silver Button    Blue Button    Red Button    Green Button    Gray Button    Black Button   

View code:

?
1
2
3
4
5
6
7
8
9
<!-- DC Social Buttons Start -->
<a href="#" class="dc_g_button white">White Button</a>
<a href="#" class="dc_g_button silver">Silver Button</a>
<a href="#" class="dc_g_button blue">Blue Button</a>
<a href="#" class="dc_g_button red">Red Button</a>
<a href="#" class="dc_g_button green">Green Button</a>
<a href="#" class="dc_g_button gray">Gray Button</a>
<a href="#" class="dc_g_button black">Black Button</a>
<!-- DC Social Buttons End -->

Apple Style

Normal:    

Disabled:   		 

  		 

  		 

 

View code:

?
1
2
3
4
5
6
7
8
9
10
<!-- DC Social Buttons Start -->
<button class="dc_ibutton">Buy now</button>
<button class="dc_ibutton" disabled>Buy now</button>
<button class="dc_ibutton-red">Sign up</button>
<button class="dc_ibutton-red" disabled>Sign up</button>
<button class="dc_ibutton-green">Download</button>
<button class="dc_ibutton-green" disabled>Download</button>
<button class="dc_ibutton-gray">Specifications</button>
<button class="dc_ibutton-gray" disabled>Specifications</button>
<!-- DC Social Buttons End -->

Pixelated Style

Blue Button Pink Button Orange Button Green Button Black Button

View code:

?
1
2
3
4
5
6
7
<!-- DC Social Buttons Start -->
<a href="#" class="dc_pixel_button lightbg-blue">Blue Button</a>
<a href="#" class="dc_pixel_button lightbg-pink">Pink Button</a>
<a href="#" class="dc_pixel_button lightbg-orange">Orange Button</a>
<a href="#" class="dc_pixel_button lightbg-green">Green Button</a>
<a href="#" class="dc_pixel_button lightbg-black">Black Button</a>
<!-- DC Social Buttons End -->

Bevel Style

Blue Button   Red Button   Green Button   Gray Button   White Button  

View code:

?
1
2
3
4
5
6
7
<!-- DC Social Buttons Start -->
<a href="#" class="dc_bevel_button blue">Blue Button</a>
<a href="#" class="dc_bevel_button red">Red Button</a>
<a href="#" class="dc_bevel_button green">Green Button</a>
<a href="#" class="dc_bevel_button gray">Gray Button</a>
<a href="#" class="dc_bevel_button white">White Button</a>
<!-- DC Social Buttons End -->

Bright Style

Blue Button Red Button Green Button Yellow Button Purple Button Orange Button Gray Button

View code:

?
1
2
3
4
5
6
7
8
9
<!-- DC Social Buttons Start -->
<a href="#" class="dc_bright_button bright-blue bright-bubble">Blue Button</a>
<a href="#" class="dc_bright_button bright-red bright-round">Red Button</a>
<a href="#" class="dc_bright_button bright-green bright-square">Green Button</a>
<a href="#" class="dc_bright_button bright-yellow bright-square">Yellow Button</a>
<a href="#" class="dc_bright_button bright-purple bright-square">Purple Button</a>
<a href="#" class="dc_bright_button bright-orange bright-square">Orange Button</a>
<a href="#" class="dc_bright_button bright-gray bright-square">Gray Button</a>
<!-- DC Social Buttons End -->


© TemplateAccess