Hello developers, today in this blog you will learn to create Simple Share Button using HTML & CSS.
Share media button are clickable icons displayed on some of your websites to allow your website visitors to share your content with social networking profiles. Social media such as Facebook, Twitter, LinkedIn, etc., The share social button is used to share the website by clicking the button.
In this blog (Simple Share Button) on the webpage, there are five buttons with some icons and colors with the respective social media buttons, such as Twitter, Facebook, LinkedIn, Reddit, and Mail. When you hover over the individual button, the background of every button changes. When you click the button, it will redirect you to the particular webpage. You can use these buttons on your website, to share your details on the website for the visitors.
The source code of this project is given below, if you want the source code of this program, you can copy it. You can use these Simple Share Button with your creativity and, can take this project to the next level.
Simple Share Button [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html, and, remember, you have to make a file with a .html extension.
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
*:after, *:before {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
height: 100%;
overflow: hidden;
padding: 0;
margin: 0;
background: #232526;
background: -webkit-linear-gradient(to right, #414345, #232526);
background: linear-gradient(to right, #414345, #232526);
}
a {
text-decoration: none;
}
.social-share-btns-container {
overflow: hidden;
position: absolute;
left: 0;
font-size: 0;
top: 50%;
margin: -30px 0;
text-align: center;
width: 100%;
z-index: 111;
}
.social-share-btns {
display: inline-block;
overflow: hidden;
}
.social-share-btns .share-btn {
float: left;
margin: 0 5px;
padding: 8px 16px;
border-radius: 10px;
color: #fff;
font-size: 14px;
line-height: 18px;
vertical-align: middle;
-moz-transition: background 0.2s ease-in-out;
-o-transition: background 0.2s ease-in-out;
-webkit-transition: background 0.2s ease-in-out;
transition: background 0.2s ease-in-out;
}
.social-share-btns .share-btn i {
margin-right: 5px;
display: inline-block;
font-size: 18px;
vertical-align: middle;
}
.share-btn {
background-color: #95a5a6;
}
.share-btn:hover {
background-color: #798d8f;
}
.share-btn-twitter {
background-color: #00aced;
}
.share-btn-twitter:hover {
background-color: #0087ba;
}
.share-btn-facebook {
background-color: #3b5998;
}
.share-btn-facebook:hover {
background-color: #2d4373;
}
.share-btn-linkedin {
background-color: #007bb6;
}
.share-btn-linkedin:hover {
background-color: #005983;
}
.share-btn-reddit {
background-color: #ED001C;
}
.share-btn-reddit:hover {
background-color: #ba0016;
}
.share-btn-mail {
background-color: #f1c40f;
}
.share-btn-mail:hover {
background-color: #dab10d;
}
.credit a{
text-decoration: none;
color: #fff;
font-weight: 800;
}
.credit {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 10px;
color:#fff;
text-align: center;
}
Thank you for reading our blog. If you face any problem in creating these Simple Share Button using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team