Inhaltsverzeichnis

Auch heute habe ich mal wieder ein spannendes CSS Tutorial für euch und zwar machen wir mal ein paar 3D Social Media Button die sogar einen kleinen Effekt haben.

Also viel Spass

Video

HTML

1
2
3
4
5
<div class="container">
<div class="button">
	<p><i class="fab fa-facebook-square"></i>Facebook</p>
</div>
</div>

CSS

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
34
35
36
37
@import url('https://fonts.googleapis.com/css?family=Roboto');
*{
    margin: 0;
    padding: 0;
    outline: 0;
}
.container{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: row;
}
.button{
    padding: 10px 20px;
    background-color: #315c9a;
    border-radius: 8px;
    width: 200px;
    box-shadow:  0 7px  0 #103d7e;
    transition-delay: all .6s;
    margin-left: 15px;
}
.button i{
    margin-right: 12px;
}
p{
    font-size: 1.5rem;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    font-family: 'Roboto',sans-serif;
}
.button:hover{
    transform: translateY(7px);
    box-shadow: 0 0 0 #103d7e;
}

Font Awesome

1
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">