{ "componentChunkName": "component---src-templates-post-template-jsx", "path": "/animated-share-button-with-html-css/", "result": {"data":{"markdownRemark":{"html":"

Here is an amazing animated share button which is created with html and css only from Darkcode. Just click on the button Run Pen below, to see how it works:

\n

\n

Note: This project also use Font Awesome for creating icons.

\n

How to create an animated share button

\n

Step 1: Add Html

\n
<div class=\"share-button\">\n  <span><i class=\"fas fa-share-alt\"></i> Share!</span>\n  <a href=\"#\"><i class=\"fab fa-facebook-f\"></i></a>\n  <a href=\"#\"><i class=\"fab fa-twitter\"></i></a>\n  <a href=\"#\"><i class=\"fab fa-instagram\"></i></a>\n  <a href=\"#\"><i class=\"fab fa-linkedin-in\"></i></a>\n</div>
\n

Step 2: Add CSS

\n
body {\n  margin: 0;\n  padding: 0;\n  font-family: 'montserrat', sans-serif;\n  background: #f1f1f1;\n  display: flex;\n  height: 100vh;\n  align-items: center;\n  justify-content: center;\n}\n\n.share-button {\n  width: 280px;\n  height: 80px;\n  background: #dfe6e9;\n  border-radius: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  position: relative;\n  cursor: pointer;\n  transition: 0.3s linear;\n}\n\n.share-button:hover {\n  transform: scale(1.1);\n}\n\n.share-button span {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background: #2d3436;\n  color: #f1f1f1;\n  text-align: center;\n  line-height: 80px;\n  z-index: 999;\n  transition: 0.6s linear;\n  border-radius: 40px;\n}\n\n.share-button:hover span {\n  transform: translateX(-100%);\n  transition-delay: 0.3s;\n}\n\n.share-button a {\n  flex: 1;\n  font-size: 26px;\n  color: #2d3436;\n  text-align: center;\n  transform: translateX(-100%);\n  opacity: 0;\n  transition: 0.3s linear;\n}\n\n.share-button:hover a {\n  opacity: 1;\n  transform: translateX(0);\n}\n\n.share-button a:nth-of-type(1) {\n  transition-delay: 1s;\n}\n\n.share-button a:nth-of-type(2) {\n  transition-delay: 0.8s;\n}\n\n.share-button a:nth-of-type(3) {\n  transition-delay: 0.6s;\n}\n\n.share-button a:nth-of-type(4) {\n  transition-delay: 0.4s;\n}
","timeToRead":2,"excerpt":"Here is an amazing animated share button which is created with html and css only from Darkcode. Just click on the button Run Pen below, to…","frontmatter":{"title":"Animated share button with html and css","date":"2020-01-08T06:00:00Z","categories":["Web UI Element"],"tags":["Button"],"description":"Here is an amazing animated share button, which is created with html and css only.","keywords":"Animated share button","cover":{"childImageSharp":{"gatsbyImageData":{"layout":"fixed","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/8ba276092056e8d887a19a4537afce99/bc51f/animated-share-button-with-html-css-amazingcss.com.png","srcSet":"/static/8ba276092056e8d887a19a4537afce99/bc51f/animated-share-button-with-html-css-amazingcss.com.png 660w","sizes":"660px"},"sources":[{"srcSet":"/static/8ba276092056e8d887a19a4537afce99/2b2b5/animated-share-button-with-html-css-amazingcss.com.webp 660w","type":"image/webp","sizes":"660px"}]},"width":660,"height":400}}}},"fields":{"slug":"/animated-share-button-with-html-css/","date":"2020-01-08T06:00:00.000Z"}}},"pageContext":{"slug":"/animated-share-button-with-html-css/","nexttitle":"Button with amazing hover effect","nextslug":"/button-with-amazing-hover-effect/","prevtitle":"Awesome textured text with html and css","prevslug":"/awesome-textured-text-html-css/","tagList":["Textured Text","Button","Hover Effect","Profile Card","Menu & Navigation","Ripple Animation","Scrollbar","Contact Info","About Section","Text Animation","Loading Animation","Pagination","404 Error Page","Form","Table","Tooltip","Collapsible","Slide","Progress Bar"],"categoryList":["Web UI Element"],"latestPostEdges":[{"node":{"fields":{"slug":"/awesome-textured-text-html-css/"},"frontmatter":{"template":"post","title":"Awesome textured text with html and css","tags":["Textured Text"],"categories":["Web UI Element"],"date":"2020-01-09T06:00:00Z"}}},{"node":{"fields":{"slug":"/animated-share-button-with-html-css/"},"frontmatter":{"template":"post","title":"Animated share button with html and css","tags":["Button"],"categories":["Web UI Element"],"date":"2020-01-08T06:00:00Z"}}},{"node":{"fields":{"slug":"/button-with-amazing-hover-effect/"},"frontmatter":{"template":"post","title":"Button with amazing hover effect","tags":["Button","Hover Effect"],"categories":["Web UI Element"],"date":"2020-01-07T06:00:00Z"}}},{"node":{"fields":{"slug":"/amazing-css-with-profile-card/"},"frontmatter":{"template":"post","title":"Amazing css with profile card","tags":["Profile Card"],"categories":["Web UI Element"],"date":"2020-01-06T06:00:00Z"}}},{"node":{"fields":{"slug":"/cool-hover-effect-on-menu/"},"frontmatter":{"template":"post","title":"Cool hover effect on menu","tags":["Menu & Navigation","Hover Effect"],"categories":["Web UI Element"],"date":"2020-01-05T10:30:00Z"}}},{"node":{"fields":{"slug":"/slideshow-navigation-buttons-css/"},"frontmatter":{"template":"post","title":"Slideshow with navigation buttons by CSS","tags":["Menu & Navigation"],"categories":["Web UI Element"],"date":"2019-10-27T11:25:00Z"}}},{"node":{"fields":{"slug":"/amazing-css-ripple-animation/"},"frontmatter":{"template":"post","title":"Amazing CSS with ripple animation","tags":["Ripple Animation"],"categories":["Web UI Element"],"date":"2019-10-27T11:20:00Z"}}},{"node":{"fields":{"slug":"/responsive-navigation-bar-css/"},"frontmatter":{"template":"post","title":"Responsive navigation bar with css","tags":["Menu & Navigation"],"categories":["Web UI Element"],"date":"2019-10-27T11:15:00Z"}}}]}}, "staticQueryHashes": []}