css实现玻璃按钮点击动画效果代码-html代码-BFW代码库

css实现玻璃按钮点击动画效果代码

代码语言：html

代码描述：css实现玻璃按钮点击动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@900&display=swap');
/* 
frosting effect borrowed from pen by _____ I need to find that one again to give proper reference
*/
* {
  box-sizing: border-box;
}
:root {
  --h: 33;
	--s: 90%;
	--l: 90%;
  font-family: 'Noto Sans', sans-serif;

}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
}

.glass-btn {
  font-size: clamp(1.2rem, 5vw + 1rem, 2.5rem);
  width: 10em;
  height: 4em;
  
  border-radius: 0.5em;
  background-image: linear-gradient(#0003,#0000);
  
  box-shadow:
		0 -0.125em 0.25em #0002,
		0 0.25em 0.25em hsl(var(--h) var(--s) var(--l) / 0.5),
		0 0 0 0.1em hsl(var(--h) var(--s) var(--l) / 0.5),
		0 0.175em 0.3em hsl(var(--h) var(--s) var(--l) / 0.5) inset,
		0 -0.025em 0.175em hsl(var(--h) var(--s) var(--l) / 0.4) inset,
		0 -0.25em 1em 0.3em hsl(var(--h) var(--s) var(--l) / 0.3) inset,
		0 0.6em 0 hsl(var(--h) var(--s) var(--l) / 0.3) inset,
		0 2em 1em #0004;
  backdrop-filter: blur(0.15em);
  position: relative;
  display: grid;
  place-content: center;
  color: hsl(var(--h) var(--s) var(--l) / .7);
  text-shadow: 
    0.03em 0.03em #fff5,
    -0.03em -0.03em #0005;
  cursor: pointer;
  transition: 0.4s ease;
  padding-top: 0.2em;
}

.glass-btn:before {
  content: '';
	position: absolute;
  top: 100%;
  width: 80%;
  left: 10%;
  height: 1.5em;
  
  background-image: 
    radial-gradient(
      100% 100% at center,
      hsla(var(--h),var(--s),80%,0.25),
      hsla(var(--h),var(--s),80%,0) 50%);
}

.glass-btn:after {
  content: '';
  inset: 0;
  top: 0.5em;
  position: absolute;
  
  background-image: 
    linear-gradient(
      105deg,
      transparent 20%,
      hsl(var(--h) var(--s) var(--l) / .2) 20%,
      hsl(var(--h) var(--s) var(--l) / .2) 30%,
      transparent 30%,
      transparent 32%,
      hsl(var(--h) var(--s) var(--l) / .2) 5%,
      hsl(var(--h) var(--s) var(--l) / .2) 40%,
      transparent 0%
    );
  background-size: 400% 100%;
  b.........完整代码请登录后点击上方下载按钮下载查看