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