{"id":2195,"date":"2017-01-28T22:16:17","date_gmt":"2017-01-28T22:16:17","guid":{"rendered":"http:\/\/cssreset.com\/?p=2195"},"modified":"2017-01-28T22:16:17","modified_gmt":"2017-01-28T22:16:17","slug":"social-media-button-snippets","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/social-media-button-snippets\/","title":{"rendered":"Social Media Button Snippets"},"content":{"rendered":"<style type=\"text\/css\"><!--\np.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; -webkit-text-stroke: #000000}\np.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; -webkit-text-stroke: #000000; min-height: 13.0px}\nspan.s1 {font-kerning: none}\nspan.s2 {text-decoration: underline ; font-kerning: none}\n--><\/style>\n<p>It\u2019s 2017, and at this point in time, most businesses have some sort of social media presence. Because everyone\u2019s on social media, it seems like every website also has social media buttons that link to a site or a business\u2019 social media pages, and a lot of times, these buttons look pretty generic. If you\u2019re looking to get creative with your social media buttons, check out any of the snippets below for pure CSS designs, hover effects, and shapes to use for your social media buttons:<\/p>\n<p>1. <a href=\"http:\/\/codepen.io\/IRoyaLPhoenixI\/pen\/YPjZPx\" target=\"_blank\">Social Media Buttons with Rounded Corners and Color on Hover<\/a><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-large wp-image-2200 aligncenter\" alt=\"Screen Shot 2017-01-29 at 9.18.39 AM\" src=\"https:\/\/cssdeck.com\/blog\/\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.18.39-AM-1024x147.png\" width=\"1024\" height=\"147\" srcset=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.18.39-AM-1024x147.png 1024w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.18.39-AM-300x43.png 300w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.18.39-AM-180x25.png 180w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.18.39-AM.png 1166w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>This snippet creates social media buttons that have slightly rounded corners, a nice box-shadow, and a light grey background. When you hover over an icon, the colors change to reflect the branding of the social media site\u2019s brand.<\/p>\n<p>2. <a href=\"http:\/\/codepen.io\/BenjaminVilina\/pen\/XJwPEM\" target=\"_blank\">Round Social Media Buttons<\/a><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-large wp-image-2199 aligncenter\" alt=\"Screen Shot 2017-01-29 at 9.18.45 AM\" src=\"https:\/\/cssdeck.com\/blog\/\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.18.45-AM-1024x181.png\" width=\"1024\" height=\"181\" srcset=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.18.45-AM-1024x181.png 1024w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.18.45-AM-300x53.png 300w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.18.45-AM-180x31.png 180w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.18.45-AM.png 1162w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Clean, rounded social media buttons with a nice border hover effect.<\/p>\n<p>3. <a href=\"http:\/\/codepen.io\/ShopifyPartners\/pen\/pEqWNv\" target=\"_blank\">CSS Glowing Pumpkin Social Media Buttons<\/a><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-2198\" alt=\"Screen Shot 2017-01-29 at 9.18.54 AM\" src=\"https:\/\/cssdeck.com\/blog\/\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.18.54-AM-1024x354.png\" width=\"1024\" height=\"354\" srcset=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.18.54-AM-1024x354.png 1024w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.18.54-AM-300x103.png 300w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.18.54-AM-180x62.png 180w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.18.54-AM.png 1144w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>These social media buttons are definitely seasonal, but they\u2019re also one of the most unique\u00a0 social media button snippets we\u2019ve come across. They\u2019re shaped as pumpkins, which is unique enough on its own, but when you hover over them, a glowing jack-o-lantern effect is created.<\/p>\n<p>4. <a href=\"http:\/\/codepen.io\/seanmhamlet\/pen\/PNoLLG\" target=\"_blank\">Minimalist Social Media Icons\u00a0<\/a><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-2197\" alt=\"Screen Shot 2017-01-29 at 9.19.01 AM\" src=\"https:\/\/cssdeck.com\/blog\/\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.19.01-AM-1024x289.png\" width=\"1024\" height=\"289\" srcset=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.19.01-AM-1024x289.png 1024w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.19.01-AM-300x84.png 300w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.19.01-AM-180x50.png 180w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.19.01-AM.png 1154w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>This snippet demonstrates how to make simple, minimalist social media icons with a simple hover effect that changes the opacity of the buttons when they\u2019re hovered upon.<\/p>\n<p>5. <a href=\"http:\/\/codepen.io\/GrimEgilsson\/pen\/yyLdzm\" target=\"_blank\">Rounded Social Media Icons with Flip Hover Effect\u00a0<\/a><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-2196\" alt=\"Screen Shot 2017-01-29 at 9.19.10 AM\" src=\"https:\/\/cssdeck.com\/blog\/\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.19.10-AM-1024x105.png\" width=\"1024\" height=\"105\" srcset=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.19.10-AM-1024x105.png 1024w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.19.10-AM-300x30.png 300w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.19.10-AM-180x18.png 180w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-9.19.10-AM.png 1162w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>This snippet shows you how to create rounded social media buttons that have a \u201cflip\u201d effect when you hover over them. If you hover over the Facebook icon, for example, the button appears to flip over and reveals text that reads \u201cFacebook\u201d.<\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>It\u2019s 2017, and at this point in time, most businesses have some sort of social media presence. Because everyone\u2019s on social media, it seems like every website also has social media buttons that link to a site or a business\u2019 [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/social-media-button-snippets\/\" title=\"Click to read 'Social Media Button Snippets'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2197,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2195"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2195"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2195\/revisions"}],"predecessor-version":[{"id":2201,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2195\/revisions\/2201"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2197"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}