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=Bowlby+One+SC&display=swap");
:root {
  --h: 233;
  --s: 90%;
  --l: 90%;
}

html {
  background: radial-gradient(farthest-side at -33.33% 50%, #0000 52%, #ba0c2e 54% 57%, #0000 59%) 0 calc(128px/2), radial-gradient(farthest-side at 50% 133.33%, #0000 52%, #ba0c2e 54% 57%, #0000 59%) calc(128px/2) 0, radial-gradient(farthest-side at 133.33% 50%, #0000 52%, #ba0c2e 54% 57%, #0000 59%), radial-gradient(farthest-side at 50% -33.33%, #0000 52%, #ba0c2e 54% 57%, #0000 59%), #ff0134;
  background-size: calc(128px/4.667) 128px, 128px calc(128px/4.667);
}

.glassy {
  all: unset;
  text-align: center;
  transition: 0.2s ease-in-out;
  padding: 0.5em 0.8em;
  background-color: #0000;
  border-radius: 0.1em;
  background-image: linear-gradient(#0003, #0000);
  font-family: "Bowlby One SC", sans-serif;
  font-size: 6vw;
  color: hsl(var(--h) var(--s) var(--l)/0.5);
  text-shadow: 0.05em 0.05em 0 #fff3, -0.05em -0.05em 0 #0003;
  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.05em);
}
.glassy:active {
  backdrop-filter: blur(0.02em);
  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.8) 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 1em 0.5em #0004;
  translate: 0 0.1em;
}
.glassy:before {
  content: "";
  position: absolute;
  top: 100%;
  .........完整代码请登录后点击上方下载按钮下载查看