Wie erstelle ich einen 3D Social Media Button?

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

Schlagwörter: CSS - CSS3

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

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse





0 Kommentare

Einen Kommentar abschicken

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