پیشنمایش زنده
کد HTML
<button
class="cursor-pointer group/download relative flex gap-1 px-8 py-4 bg-[#5c5fe9] text-[#f1f1f1] rounded-3xl hover:bg-opacity-70 font-semibold shadow-xl active:shadow-inner transition-all duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
height="24px"
width="24px"
>
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
<g
stroke-linejoin="round"
stroke-linecap="round"
id="SVGRepo_tracerCarrier"
></g>
<g id="SVGRepo_iconCarrier">
<g id="Interface / Download">
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="#f1f1f1"
d="M6 21H18M12 3V17M12 17L17 12M12 17L7 12"
id="Vector"
></path>
</g>
</g>
</svg>
Download
<div
class="absolute text-xs uppercase scale-0 rounded-md py-2 px-2 bg-[#5c5fe9] left-2/4 mb-3 bottom-full group-hover/download:scale-100 origin-bottom transition-all duration-300 shadow-lg before:content-[''] before:absolute before:top-full before:left-2/4 before:w-3 before:h-3 before:border-solid before:bg-[#5c5fe9] before:rotate-45 before:-translate-y-2/4 before:-translate-x-2/4"
>
69mb
</div>
</button>
کد CSS
.absolute{position:absolute}.relative{position:relative}.bottom-full{bottom:100%}.left-2\/4{left:50%}.mb-3{margin-bottom:0.75rem}.flex{display:flex}.origin-bottom{transform-origin:bottom}.scale-0{--tw-scale-x:0;--tw-scale-y:0;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}.gap-1{gap:0.25rem}.rounded-3xl{border-radius:1.5rem}.rounded-md{border-radius:0.375rem}.bg-\[\#5c5fe9\]{--tw-bg-opacity:1;background-color:rgb(92 95 233 / var(--tw-bg-opacity))}.px-2{padding-left:0.5rem;padding-right:0.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.text-\[\#f1f1f1\]{--tw-text-opacity:1;color:rgb(241 241 241 / var(--tw-text-opacity))}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.before\:absolute::before{content:var(--tw-content);position:absolute}.before\:left-2\/4::before{content:var(--tw-content);left:50%}.before\:top-full::before{content:var(--tw-content);top:100%}.before\:h-3::before{content:var(--tw-content);height:0.75rem}.before\:w-3::before{content:var(--tw-content);width:0.75rem}.before\:-translate-x-2\/4::before{content:var(--tw-content);--tw-translate-x:-50%;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))}.before\:-translate-y-2\/4::before{content:var(--tw-content);--tw-translate-y:-50%;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))}.before\:rotate-45::before{content:var(--tw-content);--tw-rotate:45deg;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))}.before\:border-solid::before{content:var(--tw-content);border-style:solid}.before\:bg-\[\#5c5fe9\]::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(92 95 233 / var(--tw-bg-opacity))}.before\:content-\[\'\'\]::before{--tw-content:'';content:var(--tw-content)}.hover\:bg-opacity-70:hover{--tw-bg-opacity:0.7}.active\:shadow-inner:active{--tw-shadow:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.group\/download:hover .group-hover\/download\:scale-100{--tw-scale-x:1;--tw-scale-y:1;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))}