Index: extensions/SocialButtons/template/admin.tpl
===================================================================
--- extensions/SocialButtons/template/admin.tpl	(revision 20401)
+++ extensions/SocialButtons/template/admin.tpl	(revision 20403)
@@ -2,5 +2,5 @@
 
 {html_style}{literal}
-img.grayscale {
+.socialbutt.disabled thead img {
   filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale"); /* Firefox 10+ */
   filter: gray; /* IE6-9 */
@@ -11,14 +11,14 @@
 {footer_script}{literal}
 jQuery("input.enable").change(function() {
-  $parent = $(this).closest("table");
+  $parent = $(this).closest("div.socialbutt");
   if (!$(this).is(":checked")) {
     $parent.find("thead label").attr("title", "{/literal}{'Enable'|@translate|escape:javascript}{literal}");
-    $parent.find("thead img").addClass('grayscale');
-    $parent.find("tbody").hide();
+    $parent.addClass('disabled');
+    $parent.removeClass('enabled');
   }
   else {
     $parent.find("thead label").attr("title", "{/literal}{'Disable'|@translate|escape:javascript}{literal}");
-    $parent.find("thead img").removeClass('grayscale');
-    $parent.find("tbody").show();
+    $parent.addClass('enabled');
+    $parent.removeClass('disabled');
   }
 });
@@ -51,15 +51,15 @@
 
 
-<div class="socialbutt"> {* <!-- twitter --> *}
+<div class="socialbutt {if not $twitter.enabled}disabled{else}enabled{/if}"> {* <!-- twitter --> *}
 <table>
   <thead>
     <tr><td colspan="2">
       <label title="{if $twitter.enabled}{'Disable'|@translate}{else}{'Enable'|@translate}{/if}">
-        <img {if not $twitter.enabled}class="grayscale"{/if} src="{$SOCIALBUTT_PATH}template/images/twitter_logo.png"/>
+        <img src="{$SOCIALBUTT_PATH}template/images/twitter_logo.png"/>
         <input class="enable" style="display:none;" type="checkbox" name="twitter[enabled]" {if $twitter.enabled}checked="checked"{/if}/>
       </label>
     </td></tr>
   </thead>
-  <tbody {if not $twitter.enabled}style="display:none;"{/if}>
+  <tbody>
     <tr class="property">
       <td>
@@ -70,5 +70,4 @@
     <tr class="button">
       <td><label>
-        20px
         <img src="{$SOCIALBUTT_PATH}template/images/twitter_small.png"/>
         <input type="radio" name="twitter[size]" value="small" {if $twitter.size=='small'}checked="checked"{/if}/>
@@ -77,5 +76,4 @@
         <input type="radio" name="twitter[size]" value="large" {if $twitter.size=='large'}checked="checked"{/if}/>
         <img src="{$SOCIALBUTT_PATH}template/images/twitter_large.png"/>
-        28px
       </label></td>
     </tr>
@@ -101,15 +99,15 @@
 </div> {* <!-- twitter --> *}
 
-<div class="socialbutt"> {* <!-- google --> *}
+<div class="socialbutt {if not $google.enabled}disabled{else}enabled{/if}"> {* <!-- google --> *}
 <table>
   <thead>
     <tr><td colspan="2">
       <label title="{if $google.enabled}{'Disable'|@translate}{else}{'Enable'|@translate}{/if}">
-        <img {if not $google.enabled}class="grayscale"{/if} src="{$SOCIALBUTT_PATH}template/images/google_logo.png"/>
+        <img src="{$SOCIALBUTT_PATH}template/images/google_logo.png"/>
         <input class="enable" style="display:none;" type="checkbox" name="google[enabled]" {if $google.enabled}checked="checked"{/if}/>
       </label>
     </td></tr>
   </thead>
-  <tbody {if not $google.enabled}style="display:none;"{/if}>
+  <tbody>
     <tr class="property">
       <td>
@@ -120,5 +118,4 @@
     <tr class="button">
       <td><label>
-        15px
         <img src="{$SOCIALBUTT_PATH}template/images/google_small.png"/>
         <input type="radio" name="google[size]" value="small" {if $google.size=='small'}checked="checked"{/if}/>
@@ -127,10 +124,8 @@
         <input type="radio" name="google[size]" value="medium" {if $google.size=='medium'}checked="checked"{/if}/>
         <img src="{$SOCIALBUTT_PATH}template/images/google_medium.png"/>
-        20px
-      </label></td>
-    </tr>
-    <tr class="button">
-      <td><label>
-        24px
+      </label></td>
+    </tr>
+    <tr class="button">
+      <td><label>
         <img src="{$SOCIALBUTT_PATH}template/images/google_standard.png"/>
         <input type="radio" name="google[size]" value="standard" {if $google.size=='standard'}checked="checked"{/if}/>
@@ -139,5 +134,4 @@
         <input type="radio" name="google[size]" value="tall" {if $google.size=='tall'}checked="checked"{/if}/>
         <img src="{$SOCIALBUTT_PATH}template/images/google_tall.png"/>
-        60px
       </label></td>
     </tr>
@@ -158,15 +152,15 @@
 <br>
 
-<div class="socialbutt"> {* <!-- pinterest --> *}
+<div class="socialbutt {if not $pinterest.enabled}disabled{else}enabled{/if}"> {* <!-- pinterest --> *}
 <table>
   <thead>
     <tr><td colspan="2">
       <label title="{if $pinterest.enabled}{'Disable'|@translate}{else}{'Enable'|@translate}{/if}">
-        <img {if not $pinterest.enabled}class="grayscale"{/if} src="{$SOCIALBUTT_PATH}template/images/pinterest_logo.png"/>
+        <img src="{$SOCIALBUTT_PATH}template/images/pinterest_logo.png"/>
         <input class="enable" style="display:none;" type="checkbox" name="pinterest[enabled]" {if $pinterest.enabled}checked="checked"{/if}/>
       </label>
     </td></tr>
   </thead>
-  <tbody {if not $pinterest.enabled}style="display:none;"{/if}>
+  <tbody>
     <tr class="property">
       <td>
@@ -191,15 +185,15 @@
 </div> {* <!-- pinterest --> *}
 
-<div class="socialbutt"> {* <!-- facebook --> *}
+<div class="socialbutt {if not $facebook.enabled}disabled{else}enabled{/if}"> {* <!-- facebook --> *}
 <table>
   <thead>
     <tr><td colspan="2">
       <label title="{if $facebook.enabled}{'Disable'|@translate}{else}{'Enable'|@translate}{/if}">
-        <img {if not $facebook.enabled}class="grayscale"{/if} src="{$SOCIALBUTT_PATH}template/images/facebook_logo.png"/>
+        <img src="{$SOCIALBUTT_PATH}template/images/facebook_logo.png"/>
         <input class="enable" style="display:none;" type="checkbox" name="facebook[enabled]" {if $facebook.enabled}checked="checked"{/if}/>
       </label>
     </td></tr>
   </thead>
-  <tbody {if not $facebook.enabled}style="display:none;"{/if}>
+  <tbody>
     <tr class="property">
       <td>
@@ -235,15 +229,15 @@
 <br>
 
-<div class="socialbutt"> {* <!-- tumblr --> *}
+<div class="socialbutt {if not $tumblr.enabled}disabled{else}enabled{/if}"> {* <!-- tumblr --> *}
 <table>
   <thead>
     <tr><td colspan="2">
       <label title="{if $tumblr.enabled}{'Disable'|@translate}{else}{'Enable'|@translate}{/if}">
-        <img {if not $tumblr.enabled}class="grayscale"{/if} src="{$SOCIALBUTT_PATH}template/images/tumblr_logo.png"/>
+        <img src="{$SOCIALBUTT_PATH}template/images/tumblr_logo.png"/>
         <input class="enable" style="display:none;" type="checkbox" name="tumblr[enabled]" {if $tumblr.enabled}checked="checked"{/if}/>
       </label>
     </td></tr>
   </thead>
-  <tbody {if not $tumblr.enabled}style="display:none;"{/if}>
+  <tbody>
     <tr class="property">
       <td>
Index: extensions/SocialButtons/template/style.css
===================================================================
--- extensions/SocialButtons/template/style.css	(revision 20401)
+++ extensions/SocialButtons/template/style.css	(revision 20403)
@@ -1,8 +1,9 @@
 .socialbutt {
   display:inline-block;
+  position:relative;
   vertical-align:top;
-  margin:10px;
+  margin:8px;
   width:500px;
-  border:10px solid #f9f9f9;
+  border:8px solid #f9f9f9;
   border-radius:10px;
   box-shadow:0 0 5px rgba(0,0,0,0.2);
@@ -11,4 +12,8 @@
   border-spacing: 0px;
   width:100%;
+}
+
+.socialbutt.disabled table tbody {
+  display:none;
 }
 
@@ -26,4 +31,8 @@
 .socialbutt thead td {
   border-top:none;
+}
+.socialbutt thead label {
+  display:block;
+  width:100%;
 }
 .socialbutt tr td:last-child {
@@ -94,2 +103,16 @@
   border-color: #3399DD #3399DD #2288CC;
 }
+
+.socialbutt thead label:before {
+  position:absolute;
+  top:15px;
+  left:10px;
+  font-size:22px;
+  color:#000;
+}
+.socialbutt.disabled thead label:before {
+  content:"\2610";
+}
+.socialbutt.enabled thead label:before {
+  content:"\2611";
+}
