前言一

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

请添加图片描述

文章目录

前言一
开始之前
一、鼠标悬浮，按钮背景滑动（1）
- 1.最终效果
- 2.创建元素
- 3. 重置浏览器样式，并使元素居中
- 4.设置统一的样式
- - 4.1 设置按钮的大小
  - 4.2 设置文字样式及鼠标hover后文字的变化
  - 4.3 在button元素前添加背景
- 5.设置不同的hover效果
- - 5.1 自上向下滑动
  - 5.2 自下向上滑动
  - 5.3 自右向左滑动
  - 5.4 自左向右滑动
  - 5.5 直接变换
- 6.全部代码
二、鼠标悬浮，按钮背景滑动（2）
- 1.最终效果
- 2.全部代码
三、鼠标悬浮，边框扩展
- 1.最终效果
- 2.创建元素
- 3. 重置浏览器样式，使元素居中，并设置统一的样式
- 4.设置hover前的统一样式
- 5.设置不同的hover样式
- - 5.1 左上及右下延伸出边框
  - - 5.1.1 在左上角及右上角设置两个子盒子
    - 5.1.2 实现边框的延伸
  - 5.2 左下及右上延伸出边框
  - 5.3&5.4 两角出现边框并延伸
  - 5.5 从一角延伸
- 6. 全部代码
四、更多样的设计方式
- 1.最终效果![请添加图片描述](https://img-blog.csdnimg.cn/8d67295865fd4c8997bcb623709af5be.gif)
- 2.与之前的相同之处
- 3.不同之处
- 4.设置hover样式
- 5.全部代码
五、综合
六、::before选择器和::after选择器
- 1.伪元素概念
- 2.我们为什么要使用伪元素？
- 3.::before 和 ::after
- - 3.1 ::before
  - 3.2 ::after
  - 3.3 简单实例
  - 注意点
七、Absolute（绝对定位）与relative（相对定位）
- 1.要点
- 2.position的属性值及区别
- 3.实例及图解
- 4.总结
八、总结

开始之前

在开始之前，我们应当先了解一下::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"><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>

btn01.css