<template>
<view class="content">
<button class="btn">彩虹按钮</button>
</view>
</template>
<script>
</script>
<style>
body{
background-color: #000;
}
.content {
margin-top: 300px;
}
.btn {
width: 170px;
height: 60px;
font-size: 18px;
background: #fff;
border: none;
border-radius: 50px;
color: #000;
outline: none;
cursor: pointer;
transition: all 0.4s;
align-items: center;
display: flex;
justify-content: center;
}
.btn:hover {
box-shadow: inset 0 0 0 4px #ef476f,
inset 0 0 0 8px #ffd166,
inset 0 0 0 12px #06d6a0,
inset 0 0 0 16px #118ab2;
background: #073b4c;
color: #fff;
}
</style>
CSS 彩虹按钮效果
特创数字科技2024-01-12 15:42
相关推荐
forwardMyLife8 分钟前
element-plus的面包屑组件el-breadcrumbice___Cpu10 分钟前
Linux 基本使用和 web 程序部署 ( 8000 字 Linux 入门 )JYbill12 分钟前
nestjs使用ESM模块化加油吧x青年31 分钟前
Web端开启直播技术方案分享吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(二)小白小白从不日白1 小时前
react hooks--useCallback恩婧1 小时前
React项目中使用发布订阅模式mez_Blog1 小时前
个人小结(2.0)珊珊而川2 小时前
【浏览器面试真题】sessionStorage和localStorage森叶2 小时前
Electron 安装包 asar 解压定位问题实战