div+css布局实现玻璃材质简洁发光按钮效果代码-html代码-BFW代码库

div+css布局实现玻璃材质简洁发光按钮效果代码

代码语言：html

代码描述：div+css布局实现玻璃材质简洁发光按钮效果代码

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

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

<head>
  <meta charset="UTF-8">
  
<link rel='stylesheet' href='https://fonts.bunny.net/css?family=amaranth:400,400i,700,700i|asap-condensed:200,300i,400,400i,600,600i,700,700i,900,900i|kode-mono:400,500,600,700'>
  
<style>
:root {
    /* vars */
    
    --bg: #f7f8fa;
    --bg2: #ebf2fa;
    --fg: #2f5380;
    --link: hsl(var(--canvas), 95%, 60%);
    --linkh: hsl(150, 90%, 50%);
    --cubic-in: cubic-bezier(0.32, 0, 0.67, 0);
    --cubic-out: cubic-bezier(0.33, 1, 0.68, 1);
    
}


button.iridescent {
    
    font-size: clamp(32px, 6vw, 64px);
    font-family: "Amaranth", sans-serif;
    text-transform: none;
    color: #818e9e;
    min-width: 8em;
    height: 3em;
    line-height: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0.5em 1.5em;
    outline: none!important;
    
    border-radius: 99vw;
    box-sizing: border-box;
    
    --brdr: 0.15em;
    border: max(2px, var(--brdr)) solid transparent;
    
    background: 
        linear-gradient( to bottom, 
            oklch(0.95 0.01 257), 
            oklch(0.92 0.0175 257 / 80%) 33%, 
            oklch(0.99 0.01 257 / 80%)) padding-box,
        linear-gradient( 165deg, 
            oklch(0.94 0.025 257 / 80%) 25%, 
            oklch(0.99 0.01 257 / 80%)) border-box;
    
    --ibxs:
        inset -0.35em -0.35em 0.25em -0.25em oklch(0.99 0.02 257),
        inset -0.33em -1em 0.75em -0.75em oklch(0.99 0.01 257);
    --bxs: 
        oklch(0.35 0.1 257 / 0.12) 0px max(4px, 0.3em) 0.3em 0px, 
        oklch(0.35 0.1 257 / 0.12) 0px max(2px, 0.18em) 0.18em 0px, 
        oklch(0.35 0.1 257 / 0.1) 0px max(1px, 0.05em) max(2px, 0.05em) 0px;
    
    /* if the drop-shadow element is miss.........完整代码请登录后点击上方下载按钮下载查看