html+css 实现hover 多层背景按钮

置顶宝码香车

于 2024-08-11 15:07:17 发布

阅读量271

点赞数 12

分类专栏： # html+css+js 绚丽按钮文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_33650655/article/details/141105586

版权

html+css+js 绚丽按钮专栏收录该内容

40 篇文章 5 订阅

订阅专栏

前言：哈喽，大家好，今天给大家分享html+css 绚丽效果！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

共同探索软件研发！敬请关注【宝码香车】
csdngif标识

一、效果

html+css 实现hover 多层背景按钮效果

二、原理解析

1.这是一个，hover实现多层背景的效果。每个按钮都是由2部分组成，button,span，如下图。

html+css 实现hover 多层背景按钮2部分组成

1.1 button是最外层的，位置和代码。

button元素显示
button元素代码

1.2 span是文字，显示和代码。

span元素显示

span元素无代码，居中是靠button中的padding:10px 20px;实现的。

1.3 按钮组成关系。

按钮组成关系侧视图

2.当按钮上有鼠标时，hover效果触发，button运行transition过渡动画效果。

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="moreBg"> <span>求点赞</span></button>
        <button class="moreBg"> <span>求关注</span></button>
        <button class="moreBg"> <span>求收藏</span></button>
        <button class="moreBg"> <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 {
    margin-top: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.moreBg {
    background-color: #b4befe;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    transition: 0.5s;
    cursor: pointer;
    font-family: "微软雅黑", monospace;
    font-size: 14px;
}

.moreBg:hover {
    background-color: #94e2d5;
    transition: 0.5s;
    -webkit-box-shadow: rgb(40, 159, 237) 5px 5px 0px 0px,
    rgb(95, 184, 255) 10px 10px 0px 0px,
    rgb(161, 216, 255) 15px 15px 0px 0px,
    rgb(202, 230, 255) 20px 20px 0px 0px,
    rgb(225, 238, 255) 25px 25px 0px 0px, 5px 5px 15px 5px rgba(0, 0, 0, 0);
    box-shadow: rgb(40, 159, 237) 5px 5px 0px 0px,
    rgb(95, 184, 255) 10px 10px 0px 0px,
    rgb(161, 216, 255) 15px 15px 0px 0px,
    rgb(202, 230, 255) 20px 20px 0px 0px,
    rgb(225, 238, 255) 25px 25px 0px 0px, 5px 5px 15px 5px rgba(0, 0, 0, 0);
}