پیشنمایش زنده
کد HTML
<div class="wrapper">
<button class="button">Confirm Transaction</button>
</div>
کد CSS
.wrapper {
border-radius: 48px;
box-shadow:
inset 12px 0 12px rgba(255, 255, 255, 0.25),
inset -2px -4px 8px rgba(255, 255, 255, 0.25);
background: linear-gradient(
336deg,
rgba(255, 196, 32, 1) 0%,
rgba(254, 75, 8, 1) 39%,
rgba(254, 75, 8, 1) 57%,
rgba(255, 196, 32, 1) 100%
);
}
.button {
cursor: pointer;
padding: 0.75rem 1.5rem;
border-radius: inherit;
font-weight: 600;
position: relative;
border: none;
background: transparent;
color: #fff;
transition: all 0.2s;
}
.button::before {
content: "";
position: absolute;
inset: 0;
inset-block-end: -2px;
border-radius: inherit;
background: linear-gradient(to top, #ffc42088, transparent);
z-index: -1;
filter: blur(5px);
transition: all 0.2s;
}
.button:hover::before {
filter: blur(0);
opacity: 0;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline-color: #fff;
}