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

代码语言:html

所属分类:表单美化

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

代码标签: 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,#000.........完整代码请登录后点击上方下载按钮下载查看

网友评论0