Heute zeige ich euch mal wieder wie man einen coolen Social Media Share Button mit CSS erstellen kann diesmal hat es die Form eines Diamanten. Sehr schön anzusehen und eigentlich gar nicht so schwer es umzusetzen.
Damit es funktioniert, bauen wir wie immer zuerst die Verbindung mit FontAwesome auf in dem man den Link einbaut
1 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> |
Video / Anleitung
HTML / CSS
Hier zuerst der HTML Teil.
1 2 3 4 5 6 7 8 | <div class="social-media">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-youtube"></i></a>
<a href="#"><i class="fa fa-xing"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div> |
Und hier dann der CSS Teil.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | body {
background: black;
}
.social-media {
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%,-50%);
}
a {
color: yellow;
border: 1px solid #fff;
border-radius: 2px;
padding: 6px;
margin: 0 6px;
text-align: center;
transform: rotate(45deg);
display: inline-block;
font-size: 25px;
width: 25px;
height: 25px;
transition: all 500ms ease;
}
a i {
transform: rotate(-45deg);
}
a:hover {
color:white;
background: red;
} |
0 Kommentare