Update config file update the representation and add default styles

config/share-buttons.php

@@ -18,10 +18,10 @@
     |
     */
 
-    'block_prefix' => '<div id="social-buttons"><ul>',
-    'block_suffix' => '</ul></div>',
-    'element_prefix' => '<li>',
-    'element_suffix' => '</li>',
+    'block_prefix' => '<div id="social-buttons">',
+    'block_suffix' => '</div>',
+    'element_prefix' => '',
+    'element_suffix' => '',
 
     /*
     |--------------------------------------------------------------------------

resources/css/share-buttons.css

@@ -0,0 +1,81 @@
+#social-buttons {
+}
+
+#social-buttons a {
+    display:inline-block;
+    margin:0.125em;
+    font-size:1.5em;
+    list-style:none;
+}
+
+#social-buttons a:hover {
+    -webkit-transform:scale(1.1);
+    -moz-transform:scale(1.1);
+    -ms-transform:scale(1.1);
+    -o-transform:scale(1.1);
+    transform:scale(1.1);
+}
+
+.fa-facebook, .fa-facebook-square {
+    color:#3c599f;
+}
+
+.fa-twitter, .fa-square-twitter {
+    color:#00aced;
+}
+
+.fa-x-twitter, .fa-square-x-twitter {
+    color:#000;
+}
+
+.fa-linkedin {
+    color:#0085ae;
+}
+
+.fa-telegram {
+    color:#0088cc;
+}
+
+.fa-whatsapp, .fa-square-whatsapp {
+    color:#4fce5d;
+}
+
+.fa-reddit {
+    color:#ff4500;
+}
+
+.fa-hacker-news {
+    color:#f37022;
+}
+
+.fa-vk {
+    color:#375474;
+}
+
+.fa-pinterest {
+    color:#cb2027;
+}
+
+.fa-get-pocket {
+    color:#ee4056;
+}
+
+.fa-evernote {
+    color:#1fb655;
+}
+
+.fa-skype {
+    color:#01aef2;
+}
+
+.fa-xing, .fa-square-xing {
+    color:#00555c;
+}
+
+.fa-share {
+    color:#1977d4;
+}
+
+.fa-envelope {
+    color:#ea4445;
+}