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> |
<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;
} |
@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"> |
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
0 Kommentare