پیشنمایش زنده
کد HTML
<div class="flex justify-center items-center gap-12 h-full">
<div
class="bg-gradient-to-b from-stone-300/40 to-transparent p-[4px] rounded-[16px]"
>
<button
class="group p-[4px] rounded-[12px] bg-gradient-to-b from-white to-stone-200/40 shadow-[0_1px_3px_rgba(0,0,0,0.5)] active:shadow-[0_0px_1px_rgba(0,0,0,0.5)] active:scale-[0.995]"
>
<div
class="bg-gradient-to-b from-stone-200/40 to-white/80 rounded-[8px] px-2 py-2"
>
<div class="flex gap-2 items-center">
<span class="font-semibold">Get Started</span>
</div>
</div>
</button>
</div>
</div>
کد CSS
.flex{display:flex}.h-full{height:100%}.items-center{align-items:center}.justify-center{justify-content:center}.gap-12{gap:3rem}.gap-2{gap:0.5rem}.rounded-\[12px\]{border-radius:12px}.rounded-\[16px\]{border-radius:16px}.rounded-\[8px\]{border-radius:8px}.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.from-stone-200\/40{--tw-gradient-from:rgb(231 229 228 / 0.4) var(--tw-gradient-from-position);--tw-gradient-to:rgb(231 229 228 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-stone-300\/40{--tw-gradient-from:rgb(214 211 209 / 0.4) var(--tw-gradient-from-position);--tw-gradient-to:rgb(214 211 209 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-white{--tw-gradient-from:#fff var(--tw-gradient-from-position);--tw-gradient-to:rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-stone-200\/40{--tw-gradient-to:rgb(231 229 228 / 0.4) var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.to-white\/80{--tw-gradient-to:rgb(255 255 255 / 0.8) var(--tw-gradient-to-position)}.p-\[4px\]{padding:4px}.px-2{padding-left:0.5rem;padding-right:0.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.font-semibold{font-weight:600}.shadow-\[0_1px_3px_rgba\(0\2c 0\2c 0\2c 0\.5\)\]{--tw-shadow:0 1px 3px rgba(0,0,0,0.5);--tw-shadow-colored:0 1px 3px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.active\:scale-\[0\.995\]:active{--tw-scale-x:0.995;--tw-scale-y:0.995;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:shadow-\[0_0px_1px_rgba\(0\2c 0\2c 0\2c 0\.5\)\]:active{--tw-shadow:0 0px 1px rgba(0,0,0,0.5);--tw-shadow-colored:0 0px 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}