js+css实现带阴影按钮点击弹出消息通知栏效果代码-html代码-BFW代码库

js+css实现带阴影按钮点击弹出消息通知栏效果代码

代码语言：html

所属分类：弹出层

代码描述：js+css实现带阴影按钮点击弹出消息通知栏效果代码

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

<!DOCTYPE html>
<html>


<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;font-family:roboto,sans-serif}body{background:#fafafa}.wrapper{display:grid;gap:2rem;place-items:center;place-content:center;min-height:100vh}.container{display:flex;gap:2rem;flex-wrap:wrap;place-content:center;justify-content:center;background-color:#fafafa}button{font:inherit;border:0;background-color:#fff;font-size:2.5rem;padding:.3em 1em;cursor:pointer;position:relative;transition:all 250ms cubic-bezier(.99,-.14,.05,1.07)}button:is(:hover,:focus){transform:translate(10px,10px);box-shadow:0 0 #00214d}.success{background-color:hsl(171 100% 46.1%);color:hsl(171 100% 13.1%);box-shadow:10px 10px hsl(171 100% 13.1%)}.warning{background-color:hsl(350 100% 66.5%);color:hsl(350 100% 13.5%);box-shadow:10px 10px hsl(350 100% 13.5%)}.info{background-color:hsl(51 97.8% 65.1%);color:hsl(51 97.8% 12.1%);box-shadow:10px 10px hsl(51 97.8% 12.1%)}
</style>
</head>

<body>
    <div class="wrapper">
        <div class="container"><button class="success" data-message="👊 自定义消息内容! 👊">提交</button><button class="warning">删除</button><button class="info">其他消息</button></div>
    </div>
    <script>
const success=document.querySelector('.success');
const warning=document.querySelector('.warning');
const info=document.querySelector('.info');
let toastContainer;
function generateToast({message,background='#00214d',color='#f.........完整代码请登录后点击上方下载按钮下载查看