Загрузка...

Кнопка-иконка с эффектом жидкого стекла и галочкой. Идеальна для подтверждения действий, одобрения или индикации статуса.
<button class="liquid-glass-button relative inline-flex items-center justify-center w-10 h-10 rounded-xl text-white cursor-pointer outline-none overflow-hidden bg-gradient-to-r from-white/10 to-white/5 backdrop-blur-xl border border-white/15 shadow-lg hover:scale-105 hover:shadow-xl hover:-translate-y-0.5 active:scale-98 active:translate-y-px transition-all duration-300 ease-out" style="box-shadow: 0 0 6px rgba(0,0,0,0.03), 0 2px 6px rgba(0,0,0,0.08), inset 3px 3px 0.5px -3px rgba(255,255,255,0.2), inset -3px -3px 0.5px -3px rgba(255,255,255,0.1), inset 1px 1px 1px -0.5px rgba(255,255,255,0.3), inset -1px -1px 1px -0.5px rgba(255,255,255,0.15), inset 0 0 6px 6px rgba(255,255,255,0.05), inset 0 0 2px 2px rgba(255,255,255,0.02), 0 0 12px rgba(0,0,0,0.1);">
<div class="absolute inset-0 rounded-xl overflow-hidden pointer-events-none">
<div class="absolute inset-0 bg-gradient-to-br from-white/8 via-transparent to-white/3"></div>
</div>
<svg class="w-4 h-4 relative z-10" stroke="currentColor" stroke-width="1.5" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path>
</svg>
<script>
(function(){const button = document.querySelector('.liquid-glass-button');if(button){button.addEventListener('click', function(e){const rect = this.getBoundingClientRect();const x = e.clientX - rect.left;const y = e.clientY - rect.top;const ripple = document.createElement('span');ripple.className = 'absolute rounded-full bg-gradient-radial from-white/30 to-transparent pointer-events-none animate-ping';ripple.style.left = x - 25 + 'px';ripple.style.top = y - 25 + 'px';ripple.style.width = '50px';ripple.style.height = '50px';ripple.style.animation = 'ripple 0.6s linear';this.appendChild(ripple);setTimeout(() => ripple.remove(), 600);});}})()
</script>
<style>
@keyframes ripple {
0% {
transform: scale(0);
opacity: 1
}
100% {
transform: scale(2);
opacity: 0
}
}
</style>
</button>