Liquid Glass Button — codepeek.dev

Buttons · community component

CSSMIT licenseUpdated today

◉ 1 views

Live

<!--
  Author: @ana_mora
  License: MIT
  Tags: #advanced #css #glassmorphism
-->
<button class="lg-btn"><span>Get Started</span><i class="lg-arrow">-&gt;</i></button>

/*
 * Author: @ana_mora
 * License: MIT
 * Tags: #advanced #css #glassmorphism
 */

.lg-btn{position:relative;padding:16px 32px;border:1px solid rgba(255,255,255,.3);border-radius:16px;color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);font:600 15px Inter,sans-serif;overflow:hidden;isolation:isolate;box-shadow:0 8px 32px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .35s cubic-bezier(.2,.9,.3,1.3);cursor:pointer}.lg-btn:before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.5),transparent 45%);transform:rotate(0deg);transition:transform .6s ease;z-index:-1}.lg-btn:hover{transform:translateY(-3px) scale(1.02)}.lg-btn:hover:before{transform:rotate(35deg)}.lg-btn span{display:inline-flex;align-items:center;gap:10px}.lg-arrow{display:inline-block;transition:transform .3s ease}.lg-btn:hover .lg-arrow{transform:translateX(6px)}

CSS colorsDetected automatically · edit to replace everywhere

0 colors

FormatCSS

CategoryButtons

AccessibilityKeyboard ready

Explore similar parts →

Created by

Ana Mora

@ana_mora

LicenseMIT

Free for personal and commercial projects. Attribution appreciated, not required.

Ana Mora

Comments 0