8000 Add files via upload · bedimcode/skeuomorphism-button@bd29157 · GitHub
[go: up one dir, main page]
Skip to content

Commit bd29157

Browse files
bedimcodebedimcode
authored
Add files via upload
1 parent 582e42b commit bd29157

File tree

4 files changed

+141
-0
lines changed

4 files changed

+141
-0
lines changed

‎assets/css/styles.css

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/*=============== SKEUOMORPHISM BUTTON ===============*/
2+
* {
3+
box-sizing: border-box;
4+
}
5+
6+
body {
7+
height: 100vh;
8+
margin: 0;
9+
display: grid;
10+
place-items: center;
11+
background: #26272C;
12+
}
13+
14+
.skeuo__switch {
15+
display: none;
16+
}
17+
18+
.skeuo__button {
19+
width: 6rem;
20+
background: linear-gradient(90deg, #444650 0%, #101113 100%);
21+
padding: .75rem 1.25rem .75rem 1rem;
22+
border-radius: 3rem;
23+
box-shadow: inset -2px 0 18px #212227,
24+
inset -14px 0 6px #43454F,
25+
inset 4px 0 6px #151619;
26+
cursor: pointer;
27+
display 8000 : flex;
28+
justify-content: space-between;
29+
align-items: center;
30+
transition: .2s;
31+
}
32+
33+
.skeuo__circle {
34+
font-size: 18px;
35+
color: #5CCC9D;
36+
}
37+
38+
.skeuo__line {
39+
transform: rotate(90deg);
40+
font-size: 22px;
41+
color: #9699A6;
42+
}
43+
44+
/* Button animation effects */
45+
.skeuo__switch:checked ~ .skeuo__button {
46+
background: linear-gradient(90deg, #101113 0%, #444650 100%);
47+
box-shadow: inset -2px 0 18px #212227,
48+
inset -4px 0 6px #151619,
49+
inset 14px 0 6px #43454F;
50+
padding: .75rem 1rem .75rem 1.25rem;
51+
}
52+
53+
.skeuo__switch:checked ~ .skeuo__button .skeuo__circle {
54+
font-size: 20px;
55+
}
56+
57+
.skeuo__switch:checked ~ .skeuo__button .skeuo__line {
58+
font-size: 18px;
59+
}

‎assets/scss/styles.scss

+58
+
background: linear-gradient(90deg, #444650 0%, #101113 100%);
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/*=============== SKEUOMORPHISM BUTTON ===============*/
2+
*{
3+
box-sizing: border-box;
4+
}
5+
6+
body{
7+
height: 100vh;
8+
margin: 0;
9+
display: grid;
10+
place-items: center;
11+
background: #26272C;
12+
}
13+
14+
.skeuo{
15+
&__switch{
16+
display: none;
17+
}
18+
&__button{
19+
width: 6rem;
20
21+
padding: .75rem 1.25rem .75rem 1rem;
22+
border-radius: 3rem;
23+
box-shadow: inset -2px 0 18px #212227,
24+
inset -14px 0 6px #43454F,
25+
inset 4px 0 6px #151619;
26+
cursor: pointer;
27+
display: flex;
28+
justify-content: space-between;
29+
align-items: center;
30+
transition: .2s;
31+
}
32+
&__circle{
33+
font-size: 18px;
34+
color: #5CCC9D;
35+
}
36+
&__line{
37+
transform: rotate(90deg);
38+
font-size: 22px;
39+
color: #9699A6;
40+
}
41+
}
42+
43+
/* Button animation effects */
44+
.skeuo{
45+
&__switch:checked ~ .skeuo__button{
46+
background: linear-gradient(90deg, #101113 0%, #444650 100%);
47+
box-shadow: inset -2px 0 18px #212227,
48+
inset -4px 0 6px #151619,
49+
inset 14px 0 6px #43454F;
50+
padding: .75rem 1rem .75rem 1.25rem;
51+
}
52+
&__switch:checked ~ .skeuo__button .skeuo__circle{
53+
font-size: 20px;
54+
}
55+
&__switch:checked ~ .skeuo__button .skeuo__line{
56+
font-size: 18px;
57+
}
58+
}

‎index.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<!--=============== BOXICONS ===============-->
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
9+
10+
<!--=============== CSS ===============-->
11+
<link rel="stylesheet" href="assets/css/styles.css">
12+
13+
<title> Skeuomorphism button - Bedimcode </title>
14+
</head>
15+
<body>
16+
<label>
17+
<input type="checkbox" class="skeuo__switch">
18+
<div class="skeuo__button">
19+
<i class='bx bx-circle skeuo__circle'></i>
20+
<i class='bx bx-minus skeuo__line'></i>
21+
</div>
22+
</label>
23+
</body>
24+
</html>

‎preview.png

46.2 KB
Loading

0 commit comments

Comments
 (0)
0