Heute möchte ich euch mal einen etwas aufwändigerene Button Stil zeigen und zwar kann man ihn auch als 3D erstellen. Ja der Button wir hier nicht nur perspektifisch transformiert sondern auch noch in Scheiben geschnitten und dann angezeigt. Wenn man dann mit der Maus darüber fährt, gibts dann diesen Scheiben / Layer Effekt der sich aufklappt.
Video
HTML
1
2
3
4
5
6
7
| <button>
<span></span>
<span></span>
<span></span>
<span></span>
<span>Button</span>
</button> |
<button>
<span></span>
<span></span>
<span></span>
<span></span>
<span>Button</span>
</button>
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
| button {
transform: rotate(-25deg) skew(25deg);
transform-style: preserve-3d;
position: relative;
width: 100px;
height: 32px;
border: none;
background: transparent;
font-family: inherit;
}
button::before {
content: '';
position: absolute;
bottom: -10px;
left: -5px;
width: 100%;
height: 10px;
background: #2a2a2a;
/* 2a2a2a */
transform: skewX(-41deg);
}
button::after {
content: '';
position: absolute;
top: 5px;
left: -9px;
width: 9px;
height: 100%;
background: #2a2a2a;
transform: skewY(-49deg);
}
button span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #2a2a2a;
color: #fff;
font-size: 25px;
transition: 100ms ease-in-out;
}
button:hover span {
z-index: 1000;
transition: 300ms;
color: #fff;
}
button:hover span:nth-child(5) {
transform: translate(40px, -40px);
opacity: 1;
}
button:hover span:nth-child(4) {
transform: translate(30px, -30px);
opacity: .8;
}
button:hover span:nth-child(3) {
transform: translate(20px, -20px);
opacity: .6;
}
button:hover span:nth-child(2) {
transform: translate(10px, -10px);
opacity: .4;
}
button:hover span:nth-child(1) {
transform: translate(0px, -0px);
opacity: .2;
}
button:active span:nth-child(5) {
transform: translate(20px, -20px);
opacity: 1;
}
button:active span:nth-child(4) {
transform: translate(15px, -15px);
}
button:active span:nth-child(3) {
transform: translate(10px, -10px);
}
button:active span:nth-child(2) {
transform: translate(5px, -5px);
}
button:active span:nth-child(1) {
transform: translate(0px, -0px);
}
button:nth-child(1):hover span {
background: #52E19F;
} |
button {
transform: rotate(-25deg) skew(25deg);
transform-style: preserve-3d;
position: relative;
width: 100px;
height: 32px;
border: none;
background: transparent;
font-family: inherit;
}button::before {
content: '';
position: absolute;
bottom: -10px;
left: -5px;
width: 100%;
height: 10px;
background: #2a2a2a;
/* 2a2a2a */
transform: skewX(-41deg);
}button::after {
content: '';
position: absolute;
top: 5px;
left: -9px;
width: 9px;
height: 100%;
background: #2a2a2a;
transform: skewY(-49deg);
}button span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #2a2a2a;
color: #fff;
font-size: 25px;
transition: 100ms ease-in-out;
}button:hover span {
z-index: 1000;
transition: 300ms;
color: #fff;
}button:hover span:nth-child(5) {
transform: translate(40px, -40px);
opacity: 1;
}button:hover span:nth-child(4) {
transform: translate(30px, -30px);
opacity: .8;
}button:hover span:nth-child(3) {
transform: translate(20px, -20px);
opacity: .6;
}button:hover span:nth-child(2) {
transform: translate(10px, -10px);
opacity: .4;
}button:hover span:nth-child(1) {
transform: translate(0px, -0px);
opacity: .2;
}button:active span:nth-child(5) {
transform: translate(20px, -20px);
opacity: 1;
}button:active span:nth-child(4) {
transform: translate(15px, -15px);}button:active span:nth-child(3) {
transform: translate(10px, -10px);}button:active span:nth-child(2) {
transform: translate(5px, -5px);}button:active span:nth-child(1) {
transform: translate(0px, -0px);
}button:nth-child(1):hover span {
background: #52E19F;
}
0 Kommentare