پیشنمایش زنده
کد HTML
<button class="cursor-pointer transition-all bg-blue-500 text-white px-6 py-2 rounded-lg
border-blue-600
border-b-[4px] hover:brightness-110 hover:-translate-y-[1px] hover:border-b-[6px]
active:border-b-[2px] active:brightness-90 active:translate-y-[2px]">
Button
</button>
کد CSS
.cursor-pointer {
cursor: pointer
}
.rounded-lg {
border-radius: 0.5rem
}
.border-b-\[4px\] {
border-bottom-width: 4px
}
.border-blue-600 {
--tw-border-opacity: 1;
border-color: rgb(37 99 235 / var(--tw-border-opacity))
}
.bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity))
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.hover\:-translate-y-\[1px\]:hover {
--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))
}
.hover\:border-b-\[6px\]:hover {
border-bottom-width: 6px
}
.hover\:brightness-110:hover {
--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)
}
.active\:translate-y-\[2px\]:active {
--tw-translate-y: 2px;
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\:border-b-\[2px\]:active {
border-bottom-width: 2px
}
.active\:brightness-90:active {
--tw-brightness: brightness(.9);
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)
}