前言:哈喽,大家好,今天给大家分享html+css 绚丽效果!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕
文章目录
- 效果
- 原理解析
- 1.每个按钮是由button,button::before,span,button::after组成。
- 2.当按钮上有鼠标时,==hover效果触发==,==改变button::before和button::after==,并且从代码里可以看出==点击时==,==button::after==也会有一个==向下的位移==。
- 3.具体的变换参数,直接==看代码==,可以一键复制,查看效果
- 上代码,可以直接复制使用
- 目录
- html
- css
效果
原理解析
1.每个按钮是由button,button::before,span,button::after组成。
2.当按钮上有鼠标时,hover效果触发,改变button::before和button::after,并且从代码里可以看出点击时,button::after也会有一个向下的位移。
/*当hover时*/
.butBilayer:hover::before {
transform: translate(5%, 20%);
width: 110%;
height: 110%;
}
.butBilayer:hover::after {
border-radius: 10px;
transform: translate(0, 0);
width: 100%;
height: 100%;
}
/*点击时的效果*/
.butBilayer:active::after {
transition: 0s;
transform: translate(0, 5%);
}
3.具体的变换参数,直接看代码,可以一键复制,查看效果
上代码,可以直接复制使用
目录
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html+css 实现hover双层按钮</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<h1 style="text-align: center;color:#fff;margin-bottom: 50px;padding-top: 50px; text-shadow: 0 3px 3px #4c6ed3;">
html+css 实现hover双层按钮</h1>
<div class="wrapper">
<button class="butBilayer">
<span>求点赞</span>
</button>
<button class="butBilayer">
<span>求关注</span>
</button>
<button class="butBilayer">
<span>求收藏</span>
</button>
<button class="butBilayer">
<span>求转发</span>
</button>
</div>
</div>
</body>
</html>
css
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root
{
--btn-bg-color:#fff;
--font-color-black: #000;
--btn-bg-color-hover: #FF5833;
}
.container{
min-height: 100vh;
background-color: #0e1538;
}
.wrapper{
display: flex;
flex-direction: column;
align-items: center;
gap:40px;
}
.butBilayer {
all: unset;
width: 100px;
height: 30px;
font-size: 16px;
background: transparent;
border: none;
position: relative;
color: #f0f0f0;
cursor: pointer;
z-index: 1;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.butBilayer::after,
.butBilayer::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
z-index: -99999;
transition: all 0.4s;
}
.butBilayer::before {
transform: translate(0%, 0%);
width: 100%;
height: 100%;
background: #28282d;
border-radius: 10px;
}
.butBilayer::after {
transform: translate(10px, 10px);
width: 35px;
height: 35px;
background: #ffffff15;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-radius: 50px;
}
/*当hover时*/
.butBilayer:hover::before {
transform: translate(5%, 20%);
width: 110%;
height: 110%;
}
.butBilayer:hover::after {
border-radius: 10px;
transform: translate(0, 0);
width: 100%;
height: 100%;
}
/*点击时的效果*/
.butBilayer:active::after {
transition: 0s;
transform: translate(0, 5%);
}
到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章,创作不易,如果能帮助到大家,希望大家多多支持宝码香车~💕
更多专栏订阅推荐:
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象(Date())操作