Wie erstelle ich einen 3D Social Media Button?

von | Dez 2, 2020 | Allgemein, Mein Youtube Kanal | 0 Kommentare

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">




0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung