پیشنمایش زنده
کد HTML
<button
class="relative group border-none bg-transparent p-0 outline-none cursor-pointer font-mono font-light uppercase text-base"
>
<span
class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-25 rounded-lg transform translate-y-0.5 transition duration-[600ms] ease-[cubic-bezier(0.3,0.7,0.4,1)] group-hover:translate-y-1 group-hover:duration-[250ms] group-active:translate-y-px"
></span>
<span
class="absolute top-0 left-0 w-full h-full rounded-lg bg-gradient-to-l from-[hsl(217,33%,16%)] via-[hsl(217,33%,32%)] to-[hsl(217,33%,16%)]"
></span>
<div
class="relative flex items-center justify-between py-3 px-6 text-lg text-white rounded-lg transform -translate-y-1 bg-gradient-to-r from-[#f27121] via-[#e94057] to-[#8a2387] gap-3 transition duration-[600ms] ease-[cubic-bezier(0.3,0.7,0.4,1)] group-hover:-translate-y-1.5 group-hover:duration-[250ms] group-active:-translate-y-0.5 brightness-100 group-hover:brightness-110"
>
<span class="select-none">Start session</span>
<svg
viewBox="0 0 20 20"
fill="currentColor"
class="w-5 h-5 ml-2 -mr-1 transition duration-250 group-hover:translate-x-1"
>
<path
clip-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
fill-rule="evenodd"
></path>
</svg>
</div>
</button>
کد CSS
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.left-0 {
left: 0px;
}
.top-0 {
top: 0px;
}
.-mr-1 {
margin-right: -0.25rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.flex {
display: flex;
}
.h-5 {
height: 1.25rem;
}
.h-full {
height: 100%;
}
.w-5 {
width: 1.25rem;
}
.w-full {
width: 100%;
}
.-translate-y-1 {
--tw-translate-y: -0.25rem;
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));
}
.translate-y-0\.5 {
--tw-translate-y: 0.125rem;
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));
}
.transform {
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));
}
.cursor-pointer {
cursor: pointer;
}
.select-none {
-webkit-user-select: none;
user-select: none;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.gap-3 {
gap: 0.75rem;
}
.rounded-lg {
border-radius: 0.5rem;
}
.border-none {
border-style: none;
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.bg-transparent {
background-color: transparent;
}
.bg-opacity-25 {
--tw-bg-opacity: 0.25;
}
.bg-gradient-to-l {
background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-\[\#f27121\] {
--tw-gradient-from: #f27121 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(242 113 33 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[hsl\(217\2c 33\%\2c 16\%\)\] {
--tw-gradient-from: hsl(217, 33%, 16%) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(217 33% 16% / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[\#e94057\] {
--tw-gradient-to: rgb(233 64 87 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from),
#e94057 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-\[hsl\(217\2c 33\%\2c 32\%\)\] {
--tw-gradient-to: hsl(217 33% 32% / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from),
hsl(217, 33%, 32%) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#8a2387\] {
--tw-gradient-to: #8a2387 var(--tw-gradient-to-position);
}
.to-\[hsl\(217\2c 33\%\2c 16\%\)\] {
--tw-gradient-to: hsl(217, 33%, 16%) var(--tw-gradient-to-position);
}
.p-0 {
padding: 0px;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.font-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.font-light {
font-weight: 300;
}
.uppercase {
text-transform: uppercase;
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px;
}
.brightness-100 {
--tw-brightness: brightness(1);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
transition-property:
color,
background-color,
border-color,
fill,
stroke,
opacity,
box-shadow,
transform,
filter,
-webkit-text-decoration-color,
-webkit-backdrop-filter;
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
backdrop-filter;
transition-property:
color,
background-color,
border-color,
text-decoration-color,
fill,
stroke,
opacity,
box-shadow,
transform,
filter,
backdrop-filter,
-webkit-text-decoration-color,
-webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-\[600ms\] {
transition-duration: 600ms;
}
.ease-\[cubic-bezier\(0\.3\2c 0\.7\2c 0\.4\2c 1\)\] {
transition-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1);
}
.group:hover .group-hover\:-translate-y-1\.5 {
--tw-translate-y: -0.375rem;
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));
}
.group:hover .group-hover\:translate-x-1 {
--tw-translate-x: 0.25rem;
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));
}
.group:hover .group-hover\:translate-y-1 {
--tw-translate-y: 0.25rem;
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));
}
.group:hover .group-hover\:brightness-110 {
--tw-brightness: brightness(1.1);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
var(--tw-sepia) var(--tw-drop-shadow);
}
.group:hover .group-hover\:duration-\[250ms\] {
transition-duration: 250ms;
}
.group:active .group-active\:-translate-y-0\.5 {
--tw-translate-y: -0.125rem;
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));
}
.group:active .group-active\:translate-y-px {
--tw-translate-y: 1px;
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));
}