{"id":290,"date":"2015-03-01T02:06:17","date_gmt":"2015-03-01T02:06:17","guid":{"rendered":"http:\/\/www.cssportal.com\/blog\/?p=290"},"modified":"2024-02-28T23:28:38","modified_gmt":"2024-02-28T23:28:38","slug":"animated-share-bar","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/animated-share-bar\/","title":{"rendered":"Animated Share Bar"},"content":{"rendered":"

A lot of websites use social media to share their work with other users and bring in extra visitors to their site. In this tutorial, we will create a simple animated share bar using only CSS that you can add to your site. You will just need to change the links to direct the end user to your social media pages.
\n
\n\"share-front\"
\nThe above image is the share bar that your user will see, when they hover over the share bar, that is when the bar will animate to show the social media to click on, as in the image below.
\n\"share-back\"<\/p>\n

Updated to now work with Internet Explorer.<\/em><\/p>\n

Enough talk, lets get down to the code, firstly we will look at the HTML code used to display the bar.<\/p>\n

<div class=\"share-container\">\r\n    <div class=\"flip-div\">\r\n        <div class=\"front\">\r\n            Share This Page\r\n        <\/div>\r\n        <div class=\"back\">\r\n            <a href=\"http:\/\/www.facebook.com\"><img decoding=\"async\" alt=\"facebook\" src=\"facebook.png\"><\/a>\r\n            <a href=\"http:\/\/www.google.com\"><img decoding=\"async\" alt=\"google\" src=\"google.png\"><\/a>\r\n            <a href=\"http:\/\/www.twitter.com\"><img decoding=\"async\" alt=\"twitter\" src=\"twitter.png\"><\/a>\r\n            <a href=\"http:\/\/www.pinterest.com\"><img decoding=\"async\" alt=\"twitter\" src=\"pinterest.png\"><\/a>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n<\/xmp><\/code><\/pre>\n<p>We&#8217;ll break the code down a bit:<br \/>\n<span class=\"code\">share-container<\/span> &#8211; Is the container that will hold our share bar.<br \/>\n<span class=\"code\">front<\/span> &#8211; Any code displayed here will show when the user is not hovering over the bar.<br \/>\n<span class=\"code\">back<\/span> &#8211; This is what will be displayed when the user hovers over the bar.<\/p>\n<p>Now onto the CSS code that will add our animation and all styles for the share bar.<\/p>\n<pre class=\"language-css\"><code>.share-container {\r\n   perspective: 1000;\r\n   transform-style: preserve-3d;\r\n}\r\n.share-container, .front, .back {\r\n   width: 200px;\r\n   height: 60px;\r\n}\r\n.share-container:hover .back {\r\n   transform: rotateY(0deg);\r\n}\r\n.share-container:hover .front {\r\n   transform: rotateY(180deg);\r\n}\r\n\r\n.front, .back {\r\n   border:2px solid #CCC;\r\n   border-radius:10px;\r\n   line-height:60px;\r\n   text-align:center;\r\n   background:#EEE;\r\n   box-shadow:0 0 2px #aaa;\r\n   backface-visibility: hidden;\r\n   transition: 0.6s;\r\n   transform-style: preserve-3d;\r\n   position: absolute;\r\n   top: 0;\r\n   left: 0;\r\n}\r\n.flip-div {\r\n   transition: 0.6s;\r\n   transform-style: preserve-3d;\r\n   position: relative;\r\n}\r\n.front {\r\n   z-index: 2;\r\n   color:#666;\r\n   text-shadow:0 0 3px #fff;\r\n   font-size:1.3em;\r\n   font-family:\"Gill Sans\", \"Gill Sans MT\", Calibri, \"Trebuchet MS\", sans-serif;\r\n   transform: rotateY(0deg);\r\n}\r\n.back {\r\n   transform: rotateY(-180deg);\r\n}\r\n.back img {\r\n   vertical-align:middle;\r\n}\r\n<\/code><\/pre>\n<p>The code used to animate the share bar is the <span class=\"code\">transform<\/span> and <span class=\"code\">transform-style<\/span> property. To view more information on these properties, please check out our <a href=\"http:\/\/www.cssportal.com\/css-properties\/transform.php\">transform property<\/a> and <a href=\"http:\/\/www.cssportal.com\/css-properties\/transform-style.php\">transform-style property<\/a> pages.<\/p>\n<p>That&#8217;s all for this blog, feel free to use the code in your own websites and hopefully you&#8217;ll be able to get extra visitors and exposure to your website.<\/p>\n<p><a target=\"_blank\" class=\"btn btn-primary\" href=\"https:\/\/www.cssportal.com\/tryit\/index.php?file=blog\/animated-bar\" rel=\"noopener\">Demo<\/a><\/p>\n<p><a target=\"_blank\" class=\"btn btn-primary\" href=\"http:\/\/www.cssportal.com\/blog\/wp-content\/uploads\/2015\/03\/share-bar.zip\" rel=\"noopener\">Download<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A lot of websites use social media to share their work with other users and bring in extra visitors to their site. In this tutorial, we will create a simple animated share bar using only CSS that you can add to your site. You will just need to change the links to direct the end [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-290","post","type-post","status-publish","format-standard","hentry","category-css","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/comments?post=290"}],"version-history":[{"count":3,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/290\/revisions"}],"predecessor-version":[{"id":694,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/290\/revisions\/694"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}