we often use social media button to link our website to our social media's account, but it will be more fun if we add a small flip effect to the button and add for example some extra information such as the number of followers.
that's what we will show in this little project, but before we you see the full source code let's take a look on some advanced concept in CSS that we will see.
I-flip card effect
flip card effect is now regularly used in many websites, in addition to its small animation it allows us to display some extra information without using extra space. we will not show in this article the basics of flip card effect because we made a tutorial on how to make it where we explained all the code behind that effect.
we invite you to visit our tutorial in this link: card effect
II-nth-child(n)
now let's see some advanced technique in CSS.
in this project, we made 5 social media button and as you know every one of them has it's own color and we want to add the background color to every one of them. for this we have a simple solution, we add class name "facebook" for example or "twitter" and for every class we add the background color or we have another solution that will help you in the future.
we will use a special selector named nth-child(n).
when we have 5 divs for example and we want for every div add a specific color we will use that selector.
Code :
<div class="card"> 1 </div> <div class="card"> 2 </div> <div class="card"> 3 </div> <div class="card"> 4 </div> <div class="card"> 5 </div>
for the CSS :
.card:nth-child(1){
background-color: purple;
}
.card:nth-child(2){
background-color: blue;
}
.card:nth-child(3){
background-color: red;
}
.card:nth-child(4){
background-color: green;
}
.card:nth-child(5){
background-color: yellow;
}
in this example we give the first div as background color purple so .card:nth-child(1) allows us to select the first div that has the class name "card".
i hope you understand this concept because we will use it a lot.
now i will gives you the color code for every social media
- facebook: #3b5998
- twiiter: #55acee
- youtube: #b31217
- linkedin: #0077b5
- google+: #dc4e41
for the icons we will use font-awesome because it contains all kind of icons, it's free and it's very easy to use.
and now let's see the full source code.
Video tutorial
HTML CODE:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="social">
<div class="face card">
<i class="fab fa-facebook-f"></i>
</div>
<div class="back card">
<p>54.3K</p>
</div>
</div>
<div class="social">
<div class="face card">
<i class="fab fa-twitter"></i>
</div>
<div class="back card">
<p>660K</p>
</div>
</div>
<div class="social">
<div class="face card">
<i class="fab fa-youtube"></i>
</div>
<div class="back card">
<p>16K</p>
</div>
</div>
<div class="social">
<div class="face card">
<i class="fab fa-linkedin-in"></i>
</div>
<div class="back card">
<p>5K</p>
</div>
</div>
<div class="social">
<div class="face card">
<i class="fab fa-google-plus-g"></i>
</div>
<div class="back card">
<p>560</p>
</div>
</div>
</div>
</body>
</html>
CSS CODE
@import url('https://fonts.googleapis.com/css?family=Roboto');
*{
margin: 0;
padding: 0;
outline: 0;
}
body{
background-color: #fafafa;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 500px;
height: 100px;
display: flex;
flex-direction: row;
}
.social{
position: relative;
width: 100px;
height: 100px;
}
.card{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backface-visibility: hidden;
transform-origin: center;
transition: .6s;
cursor: pointer;
}
.social:nth-child(1) .card{
background-color: #3b5998;
}
.social:nth-child(2) .card{
background-color: #40a4c4;
}
.social:nth-child(3) .card{
background-color: #b31217;
}
.social:nth-child(4) .card{
background-color: #0077b5;
}
.social:nth-child(5) .card{
background-color: #dc4e41;
}
i{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: #fff;
font-size: 3rem;
}
p{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: #fff;
font-size: 100%;
font-family: 'Roboto',sans-serif;
font-size: 1.5rem;
}
.back{
transform: rotateX(-180deg);
transform-origin: center;
}
.social:hover .face{
transform-origin: center;
transform: rotateX(180deg);
}
.social:hover .back{
transform-origin: center;
transform: rotateX(0deg);
}
we hope you liked this tutorial if you liked please like our blog and let a comment and tell us what you want from us to do as a project and we will make it.
if you want to support us please visit our youtube channel and subscribe it will motivate us to do more work, thank you
Youtube channel: doctor code
Make a social media flip button Using HTML and CSS
Reviewed by Medics
on
March 25, 2019
Rating:
Reviewed by Medics
on
March 25, 2019
Rating:
No comments: