Social Media Buttons in HTML and CSS | Project Series Day - 20 | Frontend everything
Hello Everyone 👋Welcome to My New Blog. Today I have made Social Media Buttons with the help of HTML and CSS. It is Project Series Day 20. 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Let's start making this simple social media button to use in websites step by step.
Preview of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
We first have to put the link in the head section. then start coding in the body. we have made div for every item.
<head>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<a href="" class="button button--facebook">Login With Facebook</a>
<a href="" class="button button--google">Login With Google</a>
<a href="" class="button button--microsoft">Login With Microsoft</a>
</div>
</body>CSS🎈( step - 2)
Now let's design the divs and buttons and make social media buttons.
* {
font-family: sans-serif;
}
.wrapper {
max-width: 360px;
margin: 0 auto;
}
.button {
display: block;
color: white;
padding: 1rem;
text-decoration: none;
margin: 1rem 0;
transition: all 0.3s ease;
}
.button--facebook {
background-color: #3b5998;
}
.button--facebook:hover {
background-color: #2d4373;
}
.button--facebook:before {
content: "";
font-family: "FontAwesome";
padding-right: 1rem;
}
.button--google {
background-color: #dd4b39;
}
.button--google:hover {
background-color: #c23321;
}
.button--google:before {
content: "";
font-family: "FontAwesome";
padding-right: 1rem;
}
.button--microsoft {
background-color: #00bcf2;
}
.button--microsoft:hover {
background-color: #0094bf;
}
.button--microsoft:before {
content: "";
font-family: "FontAwesome";
padding-right: 1rem;
}All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.
Final Output
The codepen link is here for making your work easier!
.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.