Skip to content

Commit

Permalink
changed file updated
Browse files Browse the repository at this point in the history
  • Loading branch information
Shubh484 committed Feb 16, 2024
1 parent c942ca3 commit b86fb9f
Show file tree
Hide file tree
Showing 4 changed files with 683 additions and 360 deletions.
27 changes: 27 additions & 0 deletions Components/Buttons/skeuomorphism-button/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!--=============== BOXICONS ===============-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"
/>

<!--=============== CSS ===============-->
<link rel="stylesheet" href="styles.css" />

<title>Skeuomorphism button</title>
</head>
<body>
<label>
<input type="checkbox" class="skeuo__switch" />
<div class="skeuo__button">
<i class="bx bx-circle skeuo__circle"></i>
<i class="bx bx-minus skeuo__line"></i>
</div>
</label>
</body>
</html>
57 changes: 57 additions & 0 deletions Components/Buttons/skeuomorphism-button/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
/*=============== SKEUOMORPHISM BUTTON ===============*/
* {
box-sizing: border-box;
}

body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
background: #26272c;
}

.skeuo__switch {
display: none;
}

.skeuo__button {
width: 6rem;
background: linear-gradient(90deg, #444650 0%, #101113 100%);
padding: 0.75rem 1.25rem 0.75rem 1rem;
border-radius: 3rem;
box-shadow: inset -2px 0 18px #212227, inset -14px 0 6px #43454f,
inset 4px 0 6px #151619;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.2s;
}

.skeuo__circle {
font-size: 18px;
color: #5ccc9d;
}

.skeuo__line {
transform: rotate(90deg);
font-size: 22px;
color: #9699a6;
}

/* Button animation effects */
.skeuo__switch:checked ~ .skeuo__button {
background: linear-gradient(90deg, #101113 0%, #444650 100%);
box-shadow: inset -2px 0 18px #212227, inset -4px 0 6px #151619,
inset 14px 0 6px #43454f;
padding: 0.75rem 1rem 0.75rem 1.25rem;
}

.skeuo__switch:checked ~ .skeuo__button .skeuo__circle {
font-size: 20px;
}

.skeuo__switch:checked ~ .skeuo__button .skeuo__line {
font-size: 18px;
}
56 changes: 56 additions & 0 deletions Components/Buttons/skeuomorphism-button/styles.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/*=============== SKEUOMORPHISM BUTTON ===============*/
* {
box-sizing: border-box;
}

body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
background: #26272c;
}

.skeuo {
&__switch {
display: none;
}
&__button {
width: 6rem;
background: linear-gradient(90deg, #444650 0%, #101113 100%);
padding: 0.75rem 1.25rem 0.75rem 1rem;
border-radius: 3rem;
box-shadow: inset -2px 0 18px #212227, inset -14px 0 6px #43454f,
inset 4px 0 6px #151619;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.2s;
}
&__circle {
font-size: 18px;
color: #5ccc9d;
}
&__line {
transform: rotate(90deg);
font-size: 22px;
color: #9699a6;
}
}

/* Button animation effects */
.skeuo {
&__switch:checked ~ .skeuo__button {
background: linear-gradient(90deg, #101113 0%, #444650 100%);
box-shadow: inset -2px 0 18px #212227, inset -4px 0 6px #151619,
inset 14px 0 6px #43454f;
padding: 0.75rem 1rem 0.75rem 1.25rem;
}
&__switch:checked ~ .skeuo__button .skeuo__circle {
font-size: 20px;
}
&__switch:checked ~ .skeuo__button .skeuo__line {
font-size: 18px;
}
}
Loading

0 comments on commit b86fb9f

Please sign in to comment.