Social Share Button using HTML5 and CSS3

by
Facebook Group                                                              Join Now

Hello, learner today In this blog post, We will be creating Social Share Button using HTML5 and CSS3. In the past post, we have created many projects one of them is Creating Tic Tac Toe using Javascript. With Out wasting time Now it is time to create a Wacy Hover Button. 

Social media share is one of the important parts of the website. The share button can increase website engagement. Users can share the post or website on social media. So in this project, we have created a social media share button.

In the HTML Code we have use the div tag with the class name Share inside the div tag we have create a span tag and nav tag to create the Share button and Social media button that all in the HTML code.

Now in the CSS section we have design the share button with hover and social media icon open after clicking in the share buttons

Language UsedHTML And CSS
External Link / DependenciesNo
ResponsiveYes

There are 3 types of styles to connect CSS with HTML files. Inline CSS, Internal CSS, External CSS. For Inline CSS in this, we have to write the CSS code inside the HTML code using style Attribute elements. For internal CSS we have to use the Style tag in the Head section on HTML File. we Have used this Internal CSS in The below section. Last is External CSS for this we have to create another CSS File in the same folder this

Preview of Social Share Button

In this preview, we have used internal CSS in the code. In the internal CSS, we have to write the code in the head section using the Style tag. We have to write the code in <Style> CSS code </style> in the Head section in the HTML file. This code is ruin Codepen.io

See the Pen Social Share Button using HTML5 and CSS3 by Coding thai (@Codingthai) on CodePen.

You might like this

Social Share Button using HTML5 and CSS3 [Source code]

For Creating a Social Share Button using HTML5 and CSS3. First, you have to create three files (HTML and CSS) files with the named index.html and style.css in the same folder and you have to link the CSS files to HTML. after that paste, the HTML code in index.html, and lastly paste the CSS code in style.css that’s all after pasting the code.

First, you have to create an HTML file with the named index.html and paste the below HTML code on it and save it. Remember to give a .html extension to the HTML file.

<html lang="en" >
    <!--Codingthai.com--> 
<head>
  <meta charset="UTF-8">
  <title>Social share button</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:700'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="share">
  <span>Share</span>
  <nav>
    <a href="#"><i class="fa fa-twitter"></i></a>
    <a href="#"><i class="fa fa-facebook"></i></a>
    <a href="#"><i class="fa fa-google"></i></a>
    <a href="#"><i class="fa fa-github"></i></a>
  </nav>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

After pasting the HTML code, Now have to create a second CSS file with the named style.css. Paste the below code on it and save it. Again remember to give a .css extension to the CSS file.

body {
  font-family: "Roboto";
  background-color: #e5eef3;
  text-align: center;
  color: #f1ce64;
  font-size: 28px;
}

a {
  color: #f1ce64;
}

.share {
  position: absolute;
  width: 400px;
  left: 50%;
  margin-left: -200px;
  top: 50%;
  margin-top: -40px;
  border-radius: 80px;
}
.share span {
  width: 200px;
  line-height: 80px;
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}
.share nav {
  font-size: 0;
}
.share a {
  line-height: 80px;
  width: 80px;
  text-align: center;
  display: inline-block;
  background-color: #ffffff;
  color: #ffffff;
  overflow: hidden;
  opacity: 1;
  transition: all 0.3s ease-in-out;
  margin: 0 -20px;
  box-shadow: 3px 1px 3px rgba(0, 0, 0, 0.1);
}
.share a:nth-child(1) {
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  margin-left: 0;
}
.share a:nth-child(1):hover {
  background-color: #61c5ec;
}
.share a:nth-child(2):hover {
  background-color: #3B5998;
}
.share a:nth-child(3):hover {
  background-color: #ea4335;
}
.share a:nth-child(4) {
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  margin-right: 0;
}
.share a:nth-child(4):hover {
  background-color: #000000;
}
.share:hover span, .share.hover span {
  opacity: 0;
}
.share:hover a, .share.hover a {
  border-radius: 50%;
  margin: 0 10px;
  color: #f1ce64;
  font-size: 28px;
}
.share:hover a:hover, .share.hover a:hover {
  color: #fff;
}

After pasting both HTML and CSS now it is time to create a Javascript file in the same folder after creating the file page the Javascript code in it and save the file don’t forget to save the file with .js extension.

// Force a hover to see the effect
const share = document.querySelector('.share');

setTimeout(() => {
  share.classList.add("hover");
}, 1000);

setTimeout(() => {
  share.classList.remove("hover");
}, 3000);

That’s all after pasting the code now your code will be successfully run. If you get any kind of error/problem in the code just comment or contact me on social media

Output Result

Written By@codingthai
Code By @Coding.stella

Facebook Group                                                              Join Now
Views: 171

Leave a Comment