پیشنمایش زنده
کد HTML
<div class="btn-container">
<div class="btn-drawer transition-top">Use code: Hello10</div>
<div class="btn-drawer transition-bottom" data-value="Click to copy"></div>
<button class="btn">
<span class="btn-text">Get Coupon</span>
</button>
<svg
class="btn-corner"
xmlns="http://www.w3.org/2000/svg"
viewBox="-1 1 32 32"
>
<path
d="M32,32C14.355,32,0,17.645,0,0h.985c0,17.102,13.913,31.015,31.015,31.015v.985Z"
></path>
</svg>
<svg
class="btn-corner"
xmlns="http://www.w3.org/2000/svg"
viewBox="-1 1 32 32"
>
<path
d="M32,32C14.355,32,0,17.645,0,0h.985c0,17.102,13.913,31.015,31.015,31.015v.985Z"
></path>
</svg>
<svg
class="btn-corner"
xmlns="http://www.w3.org/2000/svg"
viewBox="-1 1 32 32"
>
<path
d="M32,32C14.355,32,0,17.645,0,0h.985c0,17.102,13.913,31.015,31.015,31.015v.985Z"
></path>
</svg>
<svg
class="btn-corner"
xmlns="http://www.w3.org/2000/svg"
viewBox="-1 1 32 32"
>
<path
d="M32,32C14.355,32,0,17.645,0,0h.985c0,17.102,13.913,31.015,31.015,31.015v.985Z"
></path>
</svg>
</div>
کد CSS
.btn-container {
--btn-color: rgb(27, 126, 207);
--corner-color: #73afe766;
--corner-dist: 24px;
--corner-multiplier: 1.3;
--timing-function: cubic-bezier(0, 0, 0, 3);
--duration: 250ms;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.btn {
position: relative;
min-width: 160px;
min-height: calc(var(--corner-dist) * 2);
border-radius: 16px;
border: none;
padding: 0.25em 1em;
background: linear-gradient(#fff2, #0001), var(--btn-color);
box-shadow:
1px 1px 2px -1px #fff inset,
0 2px 1px #00000010,
0 4px 2px #00000010,
0 8px 4px #00000010,
0 16px 8px #00000010,
0 32px 16px #00000010;
transition:
transform var(--duration) var(--timing-function),
filter var(--duration) var(--timing-function);
-webkit-transition:
transform var(--duration) var(--timing-function),
-webkit-filter var(--duration) var(--timing-function);
cursor: pointer;
}
.btn-drawer {
position: absolute;
display: flex;
justify-content: center;
min-height: 32px;
border-radius: 16px;
border: 1px solid #0002;
padding: 0.25em 1em;
font-size: 0.8em;
font-weight: 600;
font-family: "Poppins", monospace;
color: rgba(37, 37, 37, 0.6);
background: linear-gradient(#fff2, #0001), var(--btn-color);
background-color: #ffffff;
opacity: 0;
transition:
transform calc(0.5 * var(--duration)) ease,
filter var(--duration) var(--timing-function),
opacity calc(0.5 * var(--duration)) ease;
-webkit-transition:
transform calc(0.5 * var(--duration)) ease,
-webkit-filter var(--duration) var(--timing-function),
opacity calc(0.5 * var(--duration)) ease;
filter: blur(2px);
-webkit-filter: blur(2px);
}
.transition-top {
top: 0;
left: 0;
border-radius: 12px 12px 0 0;
align-items: start;
}
.transition-bottom {
bottom: 0;
right: 0;
border-radius: 0 0 12px 12px;
align-items: end;
}
.transition-bottom::after {
content: attr(data-value);
}
.btn-text {
display: inline-block;
font-size: 1.25em;
font-family: "Syne", "Poppins", "Inter", sans-serif;
font-weight: 600;
color: #5550;
background-image: linear-gradient(#fff, #fff9);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 #fff6) drop-shadow(0 -1px 0 #0006);
-webkit-filter: drop-shadow(0 1px 0 #fff6) drop-shadow(0 -1px 0 #0006);
transition:
transform var(--duration) var(--timing-function),
filter var(--duration) var(--timing-function),
color var(--duration) var(--timing-function);
-webkit-transition:
transform var(--duration) var(--timing-function),
-webkit-filter var(--duration) var(--timing-function),
color var(--duration) var(--timing-function);
}
.btn-corner {
position: absolute;
width: 32px;
fill: none;
stroke: var(--corner-color);
transition:
transform var(--duration) var(--timing-function),
filter var(--duration) var(--timing-function);
-webkit-transition:
transform var(--duration) var(--timing-function),
-webkit-filter var(--duration) var(--timing-function);
}
.btn-corner:nth-of-type(1) {
top: 0;
left: 0;
transform: translate(
calc(-1 * var(--corner-dist)),
calc(-1 * var(--corner-dist))
)
rotate(90deg);
}
.btn-corner:nth-of-type(2) {
top: 0;
right: 0;
transform: translate(var(--corner-dist), calc(-1 * var(--corner-dist)))
rotate(180deg);
}
.btn-corner:nth-of-type(3) {
bottom: 0;
right: 0;
transform: translate(var(--corner-dist), var(--corner-dist)) rotate(-90deg);
}
.btn-corner:nth-of-type(4) {
bottom: 0;
left: 0;
transform: translate(calc(-1 * var(--corner-dist)), var(--corner-dist))
rotate(0deg);
}
.btn-container:has(.btn:hover),
.btn-container:has(.btn:focus-visible) {
.btn {
transform: scale(1.05);
filter: drop-shadow(0 16px 16px #0002);
-webkit-filter: drop-shadow(0 16px 16px #0002);
}
.transition-top {
transform: translateY(-24px);
filter: blur(0px);
-webkit-filter: blur(0px);
animation: hue-anim 3s infinite linear;
-webkit-animation: hue-anim 3s infinite linear;
opacity: 1;
}
.transition-bottom {
transform: translateY(24px);
filter: blur(0px);
-webkit-filter: blur(0px);
animation: hue-anim 3s infinite linear;
-webkit-animation: hue-anim 3s infinite linear;
opacity: 1;
}
.btn-text {
filter: drop-shadow(0 1px 0 #fff6) drop-shadow(0 -1px 0 #0006)
drop-shadow(0px 6px 2px #0003);
-webkit-filter: drop-shadow(0 1px 0 #fff6) drop-shadow(0 -1px 0 #0006)
drop-shadow(0px 6px 2px #0003);
transform: scale(1.05);
color: #0008;
}
--corner-color: #73afe777;
.btn-corner:first-of-type {
transform: translate(
calc(-1 * var(--corner-multiplier) * var(--corner-dist)),
calc(-1 * var(--corner-multiplier) * var(--corner-dist))
)
rotate(90deg);
filter: drop-shadow(-10px 10px 1px var(--corner-color))
drop-shadow(-20px 20px 2px var(--corner-color));
-webkit-filter: drop-shadow(-10px 10px 1px var(--corner-color))
drop-shadow(-20px 20px 2px var(--corner-color));
}
.btn-corner:nth-of-type(2) {
transform: translate(
calc(var(--corner-multiplier) * var(--corner-dist)),
calc(-1 * var(--corner-multiplier) * var(--corner-dist))
)
rotate(180deg);
filter: drop-shadow(-10px 10px 1px var(--corner-color))
drop-shadow(-20px 20px 2px var(--corner-color));
-webkit-filter: drop-shadow(-10px 10px 1px var(--corner-color))
drop-shadow(-20px 20px 2px var(--corner-color));
}
@-moz-document url-prefix() {
.btn-corner:nth-of-type(2) {
filter: drop-shadow(10px -10px 1px var(--corner-color))
drop-shadow(20px -20px 2px var(--corner-color));
}
}
.btn-corner:nth-of-type(3) {
transform: translate(
calc(var(--corner-multiplier) * var(--corner-dist)),
calc(var(--corner-multiplier) * var(--corner-dist))
)
rotate(-90deg);
filter: drop-shadow(-10px 10px 1px var(--corner-color))
drop-shadow(-20px 20px 2px var(--corner-color));
-webkit-filter: drop-shadow(-10px 10px 1px var(--corner-color))
drop-shadow(-20px 20px 2px var(--corner-color));
}
.btn-corner:nth-of-type(4) {
transform: translate(
calc(-1 * var(--corner-multiplier) * var(--corner-dist)),
calc(var(--corner-multiplier) * var(--corner-dist))
)
rotate(0deg);
filter: drop-shadow(-10px 10px 1px var(--corner-color))
drop-shadow(-20px 20px 2px var(--corner-color));
-webkit-filter: drop-shadow(-10px 10px 1px var(--corner-color))
drop-shadow(-20px 20px 2px var(--corner-color));
}
}
.btn-container:has(.btn:active) {
.btn {
transform: scale(0.95);
filter: drop-shadow(0 10px 4px #0002);
-webkit-filter: drop-shadow(0 10px 4px #0002);
}
.transition-top,
.transition-bottom {
transform: translateY(0px) scale(0.5);
}
.btn-text {
filter: drop-shadow(0 1px 0 #fff6) drop-shadow(0 -1px 0 #0006)
drop-shadow(0px 6px 2px #0003);
-webkit-filter: drop-shadow(0 1px 0 #fff6) drop-shadow(0 -1px 0 #0006)
drop-shadow(0px 6px 2px #0003);
transform: scale(1);
color: #000a;
}
--corner-color: #3675af77;
--corner-multiplier: 0.95;
.btn-corner:first-of-type {
transform: translate(
calc(-1 * var(--corner-multiplier) * var(--corner-dist)),
calc(-1 * var(--corner-multiplier) * var(--corner-dist))
)
rotate(90deg);
filter: drop-shadow(-10px 10px 2px var(--corner-color))
drop-shadow(-20px 20px 3px var(--corner-color));
-webkit-filter: drop-shadow(-10px 10px 2px var(--corner-color))
drop-shadow(-20px 20px 3px var(--corner-color));
}
.btn-corner:nth-of-type(2) {
transform: translate(
calc(var(--corner-multiplier) * var(--corner-dist)),
calc(-1 * var(--corner-multiplier) * var(--corner-dist))
)
rotate(180deg);
filter: drop-shadow(-10px 10px 2px var(--corner-color))
drop-shadow(-20px 20px 3px var(--corner-color));
-webkit-filter: drop-shadow(-10px 10px 2px var(--corner-color))
drop-shadow(-20px 20px 3px var(--corner-color));
}
@-moz-document url-prefix() {
.btn-corner:nth-of-type(2) {
filter: drop-shadow(10px -10px 2px var(--corner-color))
drop-shadow(20px -20px 3px var(--corner-color));
}
}
.btn-corner:nth-of-type(3) {
transform: translate(
calc(var(--corner-multiplier) * var(--corner-dist)),
calc(var(--corner-multiplier) * var(--corner-dist))
)
rotate(-90deg);
filter: drop-shadow(-10px 10px 2px var(--corner-color))
drop-shadow(-20px 20px 3px var(--corner-color));
-webkit-filter: drop-shadow(-10px 10px 2px var(--corner-color))
drop-shadow(-20px 20px 3px var(--corner-color));
}
.btn-corner:nth-of-type(4) {
transform: translate(
calc(-1 * var(--corner-multiplier) * var(--corner-dist)),
calc(var(--corner-multiplier) * var(--corner-dist))
)
rotate(0deg);
filter: drop-shadow(-10px 10px 2px var(--corner-color))
drop-shadow(-20px 20px 3px var(--corner-color));
-webkit-filter: drop-shadow(-10px 10px 2px var(--corner-color))
drop-shadow(-20px 20px 3px var(--corner-color));
}
}
.btn-container:has(.btn:focus) {
.transition-bottom::after {
content: "Copied!";
animation: txt-pulse 0.8s forwards ease-in-out;
animation-delay: 0.2s;
}
}
@keyframes hue-anim {
0%,
100% {
filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);
}
50% {
filter: hue-rotate(220deg);
-webkit-filter: hue-rotate(220deg);
}
}
@-webkit-keyframes hue-anim {
0%,
100% {
-webkit-filter: hue-rotate(180deg);
}
50% {
-webkit-filter: hue-rotate(220deg);
}
}
@keyframes txt-pulse {
50% {
color: rgb(227, 135, 255);
}
}