Add pseudo 3d button using shadows
This commit is contained in:
parent
8d8923294d
commit
fe5bfa3109
SSH key fingerprint:
SHA256:9oFM1J63hYWJjCnLG6C0fxBS15rwNcWwdQNMOHYKJ/4
1 changed files with 157 additions and 0 deletions
157
llama_forge_rs/public/3dbutton.md
Normal file
157
llama_forge_rs/public/3dbutton.md
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
```html
|
||||
<div>
|
||||
<div>
|
||||
<button class="button" style="margin-right: 1em; margin-bottom: 1em;">
|
||||
<span>A</span>
|
||||
</button>
|
||||
|
||||
<button class="button" style="margin-right: 1em;">
|
||||
<span>BB</span>
|
||||
</button>
|
||||
<button class="button">
|
||||
<span>CCCC</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="button" style="margin-right: 1em;">
|
||||
<span>DDDDDDDDDDDDDDDDDDDDDDDDDDD</span>
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
```scss
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 3rem;
|
||||
background-color: rgb(225, 225, 225);
|
||||
font-family: "Inter", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button {
|
||||
--fl-shadow-color: rgba(5, 5, 5, 1);
|
||||
--str-shadow-color: rgba(5, 5, 5, 0.5);
|
||||
--shadow-color: rgba(5, 5, 5, 0.25);
|
||||
--lt-shadow-color: rgba(5, 5, 5, 0.1);
|
||||
|
||||
--highlight-color: rgba(255, 255, 255, 0.25);
|
||||
--fl-highlight-color: rgba(255, 255, 255, 1);
|
||||
|
||||
--edge-shadow: 0.15em;
|
||||
--transition: all 250ms ease;
|
||||
|
||||
all: unset;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
border-radius: 999vw;
|
||||
padding: 1em 1.5em;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
box-shadow:
|
||||
-0.15em -0.15em 0.15em -0.075em var(--shadow-color),
|
||||
0.15em -0.15em 0.15em -0.075em var(--lt-shadow-color),
|
||||
0.0375em 0.0375em 0.0675em 0 var(--lt-shadow-color);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: inherit;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
&::before {
|
||||
z-index: 1;
|
||||
inset: 0.025em;
|
||||
box-shadow:
|
||||
0 0.05em 0.05em -0.01em var(--fl-shadow-color),
|
||||
0 0.01em 0.01em -0.01em var(--str-shadow-color),
|
||||
0.15em 0.3em 0.1em -0.01em var(--shadow-color);
|
||||
}
|
||||
|
||||
&::after {
|
||||
z-index: 2;
|
||||
inset: 0.0125em;
|
||||
background-image: linear-gradient(
|
||||
135deg,
|
||||
rgb(230, 230, 230),
|
||||
rgb(180, 180, 180)
|
||||
);
|
||||
clip-path: inset(0 round 999vw);
|
||||
box-shadow:
|
||||
0 0 0 0 inset var(--shadow-color),
|
||||
-0.05em -0.05em 0.05em 0 inset var(--shadow-color),
|
||||
0 0 0.05em 0.2em inset var(--highlight-color),
|
||||
// 0.025em 0.05em 0.1em 0 inset var(--fl-highlight-color),
|
||||
-0.075em -0.25em 0.25em 0.1em inset var(--shadow-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
&::before {
|
||||
box-shadow:
|
||||
0 0.05em 0.0em -0.01em var(--fl-shadow-color),
|
||||
0 0.01em 0.01em -0.01em var(--str-shadow-color),
|
||||
0.1em 0.2em 0.066em -0.01em var(--shadow-color);
|
||||
}
|
||||
|
||||
&::after {
|
||||
clip-path: inset(clamp(1px, 0.0625em, 2px) round 999vw);
|
||||
box-shadow:
|
||||
0.1em 0.15em 0.05em 0 inset var(--shadow-color),
|
||||
-0.025em -0.03em 0.05em 0.025em inset var(--shadow-color),
|
||||
0 0 0.05em 0.3em inset var(--highlight-color),
|
||||
-0.075em -0.12em 0.2em 0.1em inset var(--shadow-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
&::before {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
--shadow-color: rgba(85, 5, 5, 0.75); // red
|
||||
--highlight-color: rgba(255, 80, 80, 0.25); // red
|
||||
|
||||
box-shadow:
|
||||
0.15em 0.175em 0.075em 0 inset var(--shadow-color),
|
||||
-0.025em -0.03em 0.05em 0.025em inset var(--shadow-color),
|
||||
0 0 0.05em 0.4em inset var(--highlight-color),
|
||||
-0.075em -0.12em 0.2em 0.1em inset var(--shadow-color);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
--text-gradient: linear-gradient(135deg, rgb(25, 25, 25), rgb(75, 75, 75));
|
||||
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
font-family: inherit;
|
||||
letter-spacing: -0.05em;
|
||||
font-weight: 500;
|
||||
color: transparent;
|
||||
background-image: var(--text-gradient);
|
||||
background-clip: text;
|
||||
transition: transform 250ms ease;
|
||||
display: block;
|
||||
text-shadow: rgba(0, 0, 0, 0.1) 0 0 0.1em;
|
||||
}
|
||||
|
||||
&:hover span {
|
||||
transform: scale(0.975);
|
||||
}
|
||||
|
||||
&:active span {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
```
|
||||
Loading…
Add table
Reference in a new issue