一定能用到的简单但实用的五种按钮样式（HTML+CSS步骤详解，含详细注释）

最新推荐文章于 2024-07-24 20:47:06 发布

澎湖Java架构师

最新推荐文章于 2024-07-24 20:47:06 发布

阅读量3.4k

点赞数

分类专栏：面试学习路线阿里巴巴文章标签： css html css3 开发语言后端

本文链接：https://blog.csdn.net/m0_54850604/article/details/124848579

版权

前言一

按钮在前端开发中往往是一个必不可少的元素，也有许多精美好看的样式资源供开发者直接使用。但博主认为，对于初学者而言，总是去cv别人做好的，而不理解其中的原理，是很不好的。
本人作为一名计科的学生，在大二也选修了校内的前端基础教程的课，但由于课时较短，老师往往不会深入讲解，许多问题无法深究。
本篇文章将会详细讲解xia五种简单的按钮样式，虽然简单，但作为基础，也很实用，且有着大学问。

请添加图片描述

开始之前

在开始之前，我们应当先了解一下::before选择器，::after选择器，以及弄懂position属性中的绝对定位（absolute）和相对定位（relative）。
没有了解过的看官，可以点击文章目录的后两节，先进行简单的了解。

一、鼠标悬浮，按钮背景滑动（1）

1.最终效果

将绿色改为透明（transparent）后。
运行效果：
请添加图片描述

2.创建元素

创建btn01.html文件，该种按钮有五种类型，如上图所示。
html文件较为简单，主要为创建五个按钮，并放在一个div中。
btn01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>button01</title>
    <link rel="stylesheet" href="btn01.css">
</head>
<body>
<div class="btn-holder">
    <button class="btn btn-1 hover-filled-slide-down">
        <span>hover me</span>
    </button>
    <button class="btn btn-1 hover-filled-slide-up">
        <span>hover me</span>
    </button>
    <button class="btn btn-1 hover-filled-slide-left">
        <span>hover me</span>
    </button>
    <button class="btn btn-1 hover-filled-slide-right">
        <span>hover me</span>
    </button>
    <button class="btn btn-1 hover-filled-opacity">
        <span>hover me</span>
    </button>
</div>
</body>
</html>

运行效果如下：
请添加图片描述

3. 重置浏览器样式，并使元素居中

创建btn01.css，重置浏览器样式，并使元素居中，方便我们观察，也可以跳过此步骤。
btn01.css:

* {
    box-sizing: border-box;
    margin: 0; padding: 0;
}
/*为方便观察，将按钮元素放于屏幕中间
1.top: 50%;left: 50%;代表可以让div块的左上顶点位于页面正中间
2.transform: translate(-50%, -50%);代表让div块向上向左分别偏移50%，这样刚好使得div块位于正中央。
*/
.btn-holder{
    position: absolute ;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

运行效果:
请添加图片描述

4.设置统一的样式

4.1 设置按钮的大小

五个按钮除hover时效果不同，因此，五个按钮设置了相同的类名(btn及btn-1)，方便我们设置他们的统一样式。
btn01.css:

.btn {
    /*每个按钮应在页面中占有自己的位置，因此选择相对定位*/
    position: relative;
    /*使元素填满父级元素*/
    display: inline-block;
    /*div的width/height设置为auto,那么表示的这个div的所有部分(内容、边框、内边距等的距离加起来)为父元素宽度*/
    width: auto; height: auto;
    /*方便观察设置背景色为绿色，演示效果中设置为透明transparent*/
    background-color: green;
    border: none;
    /*鼠标悬浮于其上时显示为手型光标*/
    cursor: pointer;
}
.btn span {
    /*同样文字也应每个按钮中占有固定的位置，选择相对定位*/
    position: relative;
    /*使元素填满父级元素*/
    display: inline-block;
    /*设置字体大小*/
    font-size: 14px;
    /*设置文字为粗体*/
    font-weight: bold;
    /*设置文字间的间距*/
    letter-spacing: 2px;
    /*定义为大写字母*/
    text-transform: uppercase;
    /*调整子元素在父元素中的位置*/
    padding: 15px 20px;
    /*设置从一个属性过渡到另一个属性的时间*/
    transition: 0.3s;
}

运行效果：
请添加图片描述

4.2 设置文字样式及鼠标hover后文字的变化

btn01.css:

/*，设置按钮的边框为黑色
按钮内部及span中文本鼠标hover前字的颜色为白色*/
.btn-1 span {
    color: rgb(255,255,255);
    border: 1px solid rgb(28, 31, 30);
    transition: 0.2s 0.1s;
}

/*鼠标hover后，字体变色*/
.btn-1 span:hover {
    color: rgb(28, 31, 30);
    transition: 0.2s 0.1s;
}

运行效果：
请添加图片描述

4.3 在button元素前添加背景

使用::before选择器，在button元素之前插入内容背景设置为黑色
btn01.css:

/*position: absolute;绝对定位，相对最近的父元素（btn-holder）来定位，不保留原有空间，并且不会影响其他元素位置
ease-out : 运动形式为减速*/
.btn-1::before {
    position: absolute;
    content: "";
    background-color: rgb(28, 31, 30);
    transition: 0.3s ease-out;
}

由于此时未设置高度及宽度，暂看不出具体的效果。可以看到添加的内容，位于.btn-1之前。
运行效果：
请添加图片描述

5.设置不同的hover效果

这里具体讲解，其中一种。其他基本同理。

5.1 自上向下滑动

修改button元素内容前的内容，也就是::before选择器插入的黑色背景,设置其宽高均为100%，在鼠标hover前，该元素距离底部边缘0px，鼠标hover后,黑色背景的高度变为0,由于该元素距离底部边缘为0px，所以自上而下活动。
btn01.css:

/*1.hover-filled-slide-down */
/*修改button元素内容前的内容，也就是::before选择器插入的黑色背景
  在鼠标hover前，距离底部边缘0px，高度为100%
*/
.hover-filled-slide-down::before {
    bottom: 0;
    height: 100%; width: 100%;

}
/*鼠标hover后,黑色背景的高度变为0%,由于该元素距离底部边缘为0px，所以自上而下活动*/
.btn.hover-filled-slide-down:hover::before {
    height: 0%;
}

::before选择器插入的内容设置宽高后的样子。
请添加图片描述
运行效果：

5.2 自下向上滑动

同理，自下而上滑动只需将选择器中的元素，设置为距离顶部边缘为0px，那么效果就变为自下而上滑动
btn01.css:

/* 2.hover-filled-slide-up */
.btn.hover-filled-slide-up::before {
    top: 0; 
    height: 100%; width: 100%;
}
.btn.hover-filled-slide-up:hover::before {
    height: 0%;
}

5.3 自右向左滑动

相信大家应该理解了该怎么做了。自右向左滑动，改变元素的宽度即可，同时使盒子距离左侧边缘为0px。
btn01.css:

/* 3.hover-filled-slide-left */
.btn.hover-filled-slide-left::before {
    top: 0; bottom: 0; left: 0;
    height: 100%; width: 100%;
}
.btn.hover-filled-slide-left:hover::before {
    width: 0%;
}

5.4 自左向右滑动

使盒子距离右侧边缘为0px即可。
btn01.css:

/* 4. hover-filled-slide-right */
.btn.hover-filled-slide-right::before {
    top:0; bottom: 0; right: 0;
    height: 100%; width: 100%;
}
.btn.hover-filled-slide-right:hover::before {
    width: 0%;
}

运行效果：
请添加图片描述

5.5 直接变换

opacity属性设置一个元素了透明度级别。从0.0（完全透明）到1.0（完全不透明）。
只需设置hover前不透明，hover后透明即可。
btn01.css:

/* 5. hover-filled-opacity */
.btn.hover-filled-opacity::before {
    height: 100%; width: 100%;
    opacity: 1;
}
.btn.hover-filled-opacity:hover::before {
    opacity: 0;
}

运行效果：
请添加图片描述

6.全部代码

btn01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>button01</title>
    <link rel="stylesheet" href="btn01.css">
</head>
<body>
<div class="btn-holder">
    <button class="btn btn-1 hover-filled-slide-down"

最低0.47元/天解锁文章

澎湖Java架构师

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
一定能用到的简单但实用的五种按钮样式（HTML+CSS步骤详解，含详细注释）

前言一按钮在前端开发中往往是一个必不可少的元素，也有许多精美好看的样式资源供开发者直接使用。但博主认为，对于初学者而言，总是去cv别人做好的，而不理解其中的原理，是很不好的。本人作为一名计科的学生，在大二也选修了校内的前端基础教程的课，但由于课时较短，老师往往不会深入讲解，许多问题无法深究。本篇文章将会详细讲解xia五种简单的按钮样式，虽然简单，但作为基础，也很实用，且有着大学问。文章目录前言一开始之前一、鼠标悬浮，按钮背景滑动（1）1.最终效果2.创建元素3. 重置浏览器样式，
复制链接

扫一扫

专栏目录