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

最新推荐文章于 2025-01-28 11:47:08 发布

peixiancccc

最新推荐文章于 2025-01-28 11:47:08 发布

阅读量1k

点赞数 28

分类专栏：程序员文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/peixiancccc/article/details/138530836

版权

程序员专栏收录该内容

302 篇文章

订阅专栏

}

/*，设置按钮的边框为黑色

按钮内部及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;

}

/*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%;

}

/* 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%;

}

/* 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%;

}

/* 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. hover-filled-opacity */

.btn.hover-filled-opacity::before {

height: 100%; width: 100%;

opacity: 1;

}

.btn.hover-filled-opacity:hover::before {

opacity: 0;

}




[]( )二、鼠标悬浮，按钮背景滑动（2）

===================================================================================



  该节为由白变黑，原理与1相同，大家尝试练习一下，加深理解，就不讲解了。



[]( )1.最终效果

-------------------------------------------------------------------------



![请添加图片描述](https://img-blog.csdnimg.cn/87ec4eb6b9ca445c96c319ba13966032.gif)



[]( )2.全部代码

-------------------------------------------------------------------------



**btn02.html**

<meta charset="UTF-8">

<title>button02</title>

<link rel="stylesheet" href="btn02.css">

<button class="btn btn-2 hover-slide-down">

    <span>hover me</span>

</button>

<button class="btn btn-2 hover-slide-up">

    <span>hover me</span>

</button>

<button class="btn btn-2 hover-slide-left">

    <span>hover me</span>

</button>

<button class="btn btn-2 hover-slide-right">

    <span>hover me</span>

</button>

<button class="btn btn-2 hover-opacity">

    <span>hover me</span>

</button>




**btn02.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%;

-webkit-transform: translate(-50%, -50%);

-moz-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

-o-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.btn {

position: relative;

display: inline-block;

/*div的width/height设置为auto,那么表示的这个div的所有部分(内容、边框、内边距等的距离加起来)为父元素宽度*/

width: auto; height: auto;

background-color: transparent;

border: none;

cursor: pointer;

margin: 0 auto;

min-width: 100px;

}

.btn span {

position: relative;

display: inline-block;

font-size: 14px;

font-weight: bold;

letter-spacing: 2px;

text-transform: uppercase;

top: 0; left: 0;

width: 100%;

padding: 15px 20px;

transition: 0.3s;

}

/— btn-2 —/

.btn-2::before {

position: absolute;

content: "";

background-color: rgb(28, 31, 30);

transition: 0.3s ease-out;

}

.btn-2 span {

color: rgb(28, 31, 30);

border: 1px solid rgb(28, 31, 30);

transition: 0.2s;

}

.btn-2 span:hover {

color: rgb(255,255,255);

transition: 0.2s 0.1s;

}

/* 6. hover-slide-down */

.btn.hover-slide-down::before {

top: 0; left: 0; right: 0;

height: 0%; width: 100%;

}

.btn.hover-slide-down:hover::before {

height: 100%;

}

/* 7. hover-slide-up */

.btn.hover-slide-up::before {

bottom: 0; left: 0; right: 0;

height: 0%; width: 100%;

}

.btn.hover-slide-up:hover::before {

height: 100%;

}

/* 8. hover-slide-left */

.btn.hover-slide-left::before {

top: 0; bottom: 0; right: 0;

height: 100%; width: 0%;

}

.btn.hover-slide-left:hover::before {

width: 100%;

}

/* 9. hover-slide-right */

.btn.hover-slide-right::before {

top: 0; bottom: 0; left: 0;

height: 100%; width: 0%;

}

.btn.hover-slide-right:hover::before {

width: 100%;

}

/* 10. hover-opacity */

.btn.hover-opacity::before {

height: 100%; width: 100%;

opacity: 0;

}

.btn.hover-opacity:hover::before {

opacity: 1;

}




[]( )三、鼠标悬浮，边框扩展

==============================================================================



[]( )1.最终效果

-------------------------------------------------------------------------



![请添加图片描述](https://img-blog.csdnimg.cn/e5d39ad706bd4ef4a0da6801332a35e1.gif)



[]( )2.创建元素

-------------------------------------------------------------------------



创建btn03.html文件,基本与之前相同  

btn01.html

<meta charset="UTF-8">

<title>button02</title>

<link rel="stylesheet" href="btn03.css">

<button class="btn btn-3 hover-border-1">

    <span>hover me</span>

</button>

<button class="btn btn-3 hover-border-2">

    <span>hover me</span>

</button>

<button class="btn btn-3 hover-border-3">

    <span>hover me</span>

</button>

<button class="btn btn-3 hover-border-4">

    <span>hover me</span>

</button>

<button class="btn btn-3 hover-border-5">

    <span>hover me</span>

</button>




[]( )3\. 重置浏览器样式，使元素居中，并设置统一的样式

---------------------------------------------------------------------------------------------



  创建btn03.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%);

}

.btn {

position: relative;

display: inline-block;

width: auto; height: auto;

/*方便观察设置背景色为绿色，演示效果中设置为透明transparent*/

background-color: green;

border: none;

cursor: pointer;

margin: 0 auto;

min-width: 100px;

}

.btn span {

position: relative;

display: inline-block;

font-size: 14px;

font-weight: bold;

letter-spacing: 2px;

text-transform: uppercase;

top: 0; left: 0;

width: 100%;

padding: 15px 20px;

transition: 0.3s;

}




运行效果同上：  

![在这里插入图片描述](https://img-blog.csdnimg.cn/88f06dcaae534f39aeb88c1b54db9c81.png)



[]( )4.设置hover前的统一样式

----------------------------------------------------------------------------------



  根据最终效果可以看到，按钮框与边框之间是有间隙的。通过设置padding值， 定义元素边框与元素内容之间的空间。  

并设置文字颜色为白色。  

**btn03.css:**

/— btn-3 —/

.btn-3 {

padding: 5px;

}

.btn-3 span {

color: rgb(255, 255, 255);

background-color: rgb(54, 56, 55);

}

.btn-3::before,

.btn-3::after {

position: absolute;

content: "";

background: transparent;

z-index: 2;

}




运行效果：  

![请添加图片描述](https://img-blog.csdnimg.cn/db1416993d934a18985ae1f71eb20f69.png)  

其中，::before与::after暂未设置宽高，因此看不到，分别位于button元素前后。  

![请添加图片描述](https://img-blog.csdnimg.cn/a7c083e839e448e7a1ed22bece65288a.png)  

![请添加图片描述](https://img-blog.csdnimg.cn/ac24ca1ae7c24f488ac0d89c451aadad.png)



[]( )5.设置不同的hover样式

---------------------------------------------------------------------------------



### []( )5.1 左上及右下延伸出边框



#### []( )5.1.1 在左上角及右上角设置两个子盒子



**btn03.css:**

/* 11. hover-border-1 */

.btn.hover-border-1::before,

.btn.hover-border-1::after {

/*设置before及after两个盒子的大小*/

width: 10%; height: 25%;

transition: 0.35s;

}

.btn.hover-border-1::before {

/*使子盒子与父盒子上边缘及左边缘距离为0，使子盒子置于父盒子左上角*/

top: 0; left: 0;

/*为方便观察设置为红色，最终效果中设置为黑色*/

/*分别设置上边框及左边框*/

border-left: 1px solid rgb(236, 8, 84);

border-top: 1px solid rgb(236, 8, 84);

}

.btn.hover-border-1::after {

/*使子盒子与父盒子下边缘及右边缘距离为0，使子盒子置于父盒子右下角*/

bottom: 0; right: 0;

/*分别设置下边框及底边框*/

border-right: 1px solid rgb(236, 8, 84);

border-bottom: 1px solid rgb(236, 8, 84);

}




  观察运行效果，可以看到，我们其实并不是去绘制线，再做线的延伸动画。  

  而是在左上角及右下角分别设置两个子盒子，设置子盒子的边框。  

运行效果：![请添加图片描述](https://img-blog.csdnimg.cn/483c72a75d744c64a6ff8acecfb2b6ac.png)  

![请添加图片描述](https://img-blog.csdnimg.cn/2652ecd624f84ff3ad5fec74fe529298.png)



#### []( )5.1.2 实现边框的延伸



  那么，到这，大家也可以猜到我们的最终效果就是通过来改变子盒子的大小来实现边框延伸了。  

**btn03.css:**

.btn.hover-border-1:hover::before,

.btn.hover-border-1:hover::after {

width: 99%;

height: 98%;

}




运行效果：  

![请添加图片描述](https://img-blog.csdnimg.cn/a1ce5dbcb36348a580d0a4c6bc96d130.gif)



### []( )5.2 左下及右上延伸出边框



  该种效果为5.1中的相反，具体原理相同，只需改变两个盒子的位置即可，就不细说了。大家练习练习，不懂得，可以留言或私信博主。  

btn03.css

/* 12. hover-border-2 */

.btn.hover-border-2::before,

.btn.hover-border-2::after {

width: 10%; height: 25%;

transition: 0.35s;

}

.btn.hover-border-2::before {

bottom: 0; left: 0;

border-left: 1px solid rgb(28, 31, 30);

border-bottom: 1px solid rgb(28, 31, 30);

}

.btn.hover-border-2::after {

top: 0; right: 0;

border-right: 1px solid rgb(28, 31, 30);

border-top: 1px solid rgb(28, 31, 30);

}

.btn.hover-border-2:hover::before,

.btn.hover-border-2:hover::after {

width: 99%;

height: 99%;

}




运行效果：  

![请添加图片描述](https://img-blog.csdnimg.cn/8c26efde33f443bab95bedea1189d094.gif)



### []( )5.3&5.4 两角出现边框并延伸



  5.1及5.2中为一开始就有一小部分边框，而该种效果为一开始并没有边框。  

  那么同样的我们只需要将两个子盒子在鼠标hover前的大小设置为0，为保险起见我们设置其透明度为不可见（opacity:0）。  

**两角逆时针延伸**

/* 13. hover-border-3 */

.btn.hover-border-3::before,

.btn.hover-border-3::after {

width: 0%; height: 0%;

opacity: 0;

transition: width 0.2s 0.15s linear, height 0.15s linear, opacity 0s 0.35s;

}

.btn.hover-border-3::before {

top: 0; right: 0;

border-top: 1px solid rgb(28, 31, 30);

border-left: 1px solid rgb(28, 31, 30);

}

.btn.hover-border-3::after {

bottom: 0; left: 0;

border-bottom: 1px solid rgb(28, 31, 30);

border-right: 1px solid rgb(28, 31, 30);

}

.btn.hover-border-3:hover::before,

.btn.hover-border-3:hover::after {

width: 100%; height: 99%;

opacity: 1;

transition: width 0.2s linear, height 0.15s 0.2s linear, opacity 0s;

}




运行效果：  

![请添加图片描述](https://img-blog.csdnimg.cn/49d33df3323a4b3a8090859ab285b0df.gif)



**两角顺时针延伸**

/* 14. hover-border-4 */

.btn.hover-border-4::before,

.btn.hover-border-4::after {

width: 0%; height: 0%;

opacity: 0;

transition: width 0.2s linear, height 0.15s 0.2s ease-out, opacity 0s 0.35s;

}

.btn.hover-border-4::before {

bottom: 0; left: -1px;

border-top: 1px solid rgb(236, 8, 84);

border-left: 1px solid rgb(236, 8, 84);

}

.btn.hover-border-4::after {

top: 0; right: 0;

border-bottom: 1px solid rgb(236, 8, 84);

border-right: 1px solid rgb(236, 8, 84);

}

.btn.hover-border-4:hover::before,

.btn.hover-border-4:hover::after {

width: 100%; height: 99%;

opacity: 1;

transition: width 0.2s 0.15s ease-out, height 0.15s ease-in, opacity 0s;

}




运行效果：  

![请添加图片描述](https://img-blog.csdnimg.cn/7ec557ada90e423aa310a9c97703a80a.gif)



### []( )5.5 从一角延伸



原理基本同上。  

重点是要是第二个盒子的动画要设置值一个延时即可。具体如何设置延时，见实例及注释。  

示例：  

第一个时间的值为 transition-duration动画持续的时间，第二个为transition-delay动画开始执行的时间。

a{ transition: background 0.8s 0.3,color 0.6s 0.3;}




运行效果：  

![请添加图片描述](https://img-blog.csdnimg.cn/c6d97fe43189406f8c2a3537f6e34352.gif)



btn03.css

*/ 15. hover-border-5 */

.btn.hover-border-5::before,

.btn.hover-border-5::after {

width: 0%; height: 0%;

opacity: 0;

}

.btn.hover-border-5::before {

top: 0; right: 0;

border-top: 1px solid rgb(28, 31, 30);

border-left: 1px solid rgb(28, 31, 30);

transition: width 0.2s 0.5s ease-out, height 0.15s 0.35s linear, opacity 0s 0.7s;

}

.btn.hover-border-5::after {

bottom: 0; left: 0px;

border-bottom: 1px solid rgb(28, 31, 30);

border-right: 1px solid rgb(28, 31, 30);

transition: width 0.2s 0.15s linear, height 0.15s ease-in, opacity 0s 0.35s;

}

.btn.hover-border-5:hover::before,

.btn.hover-border-5:hover::after {

width: 100%; height: 96%;

opacity: 1;

}

.btn.hover-border-5:hover::before {

transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s;   /* 1,2 */

}

.btn.hover-border-5:hover::after {

transition: width 0.2s 0.35s linear, height 0.15s 0.5s ease-out, opacity 0s 0.3s;

}**




[]( )6\. 全部代码

---------------------------------------------------------------------------



btn03.html

<meta charset="UTF-8">

<title>button02</title>

<link rel="stylesheet" href="btn03.css">

<button class="btn btn-3 hover-border-1">

    <span>hover me</span>

</button>

<button class="btn btn-3 hover-border-2">

    <span>hover me</span>

</button>

<button class="btn btn-3 hover-border-3">

    <span>hover me</span>

</button>

<button class="btn btn-3 hover-border-4">

    <span>hover me</span>

</button>

<button class="btn btn-3 hover-border-5">

    <span>hover me</span>

</button>




btn03.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%);

}

.btn {

position: relative;

display: inline-block;

width: auto; height: auto;

/*方便观察设置背景色为绿色，演示效果中设置为透明transparent*/

background-color: green;

border: none;

cursor: pointer;

margin: 0 auto;

min-width: 100px;

}

.btn span {

position: relative;

display: inline-block;

font-size: 14px;

font-weight: bold;

letter-spacing: 2px;

text-transform: uppercase;

top: 0; left: 0;

width: 100%;

padding: 15px 20px;

transition: 0.3s;

}

/— btn-3 —/

.btn-3 {

padding: 5px;

}

.btn-3 span {

color: rgb(255, 255, 255);

background-color: rgb(54, 56, 55);

}

.btn-3::before,

.btn-3::after {

position: absolute;

content: "";

background: transparent;

z-index: 2;

}

/* 11. hover-border-1 */

.btn.hover-border-1::before,

.btn.hover-border-1::after {

/*设置before及after两个盒子的大小*/

width: 10%; height: 25%;

transition: 0.35s;

}

.btn.hover-border-1::before {

/*使子盒子与父盒子上边缘及左边缘距离为0，使子盒子置于父盒子左上角*/

top: 0; left: 0;

/*为方便观察设置为红色，最终效果中设置为黑色*/

/*分别设置上边框及左边框*/

border-left: 1px solid rgb(28, 31, 30);

border-top: 1px solid rgb(28, 31, 30);

}

.btn.hover-border-1::after {

/*使子盒子与父盒子下边缘及右边缘距离为0，使子盒子置于父盒子右下角*/

bottom: 0; right: 0;

/*分别设置下边框及底边框*/

border-right: 1px solid rgb(28, 31, 30);

border-bottom: 1px solid rgb(28, 31, 30);

}

.btn.hover-border-1:hover::before,

.btn.hover-border-1:hover::after {

width: 99%;

height: 98%;

}

/* 12. hover-border-2 */

.btn.hover-border-2::before,

.btn.hover-border-2::after {

width: 10%; height: 25%;

transition: 0.35s;

}

.btn.hover-border-2::before {

bottom: 0; left: 0;

border-left: 1px solid rgb(28, 31, 30);

border-bottom: 1px solid rgb(28, 31, 30);

}

.btn.hover-border-2::after {

top: 0; right: 0;

border-right: 1px solid rgb(28, 31, 30);

border-top: 1px solid rgb(28, 31, 30);

}

.btn.hover-border-2:hover::before,

.btn.hover-border-2:hover::after {

width: 99%;

height: 99%;

}

/* 13. hover-border-3 */

.btn.hover-border-3::before,

.btn.hover-border-3::after {

width: 0%; height: 0%;

opacity: 0;

transition: width 0.2s 0.15s linear, height 0.15s linear, opacity 0s 0.35s;

}

.btn.hover-border-3::before {

top: 0; right: 0;

border-top: 1px solid rgb(28, 31, 30);

border-left: 1px solid rgb(28, 31, 30);

}

.btn.hover-border-3::after {

bottom: 0; left: 0;

border-bottom: 1px solid rgb(28, 31, 30);

border-right: 1px solid rgb(28, 31, 30);

}

.btn.hover-border-3:hover::before,

.btn.hover-border-3:hover::after {

width: 100%; height: 99%;

opacity: 1;

transition: width 0.2s linear, height 0.15s 0.2s linear, opacity 0s;

}

/* 14. hover-border-4 */

.btn.hover-border-4::before,

.btn.hover-border-4::after {

width: 0%; height: 0%;

opacity: 0;

transition: width 0.2s linear, height 0.15s 0.2s ease-out, opacity 0s 0.35s;

}

.btn.hover-border-4::before {

bottom: 0; left: -1px;

border-top: 1px solid rgb(28, 31, 30);

border-left: 1px solid rgb(28, 31, 30);

}

.btn.hover-border-4::after {

top: 0; right: 0;

border-bottom: 1px solid rgb(28, 31, 30);

border-right: 1px solid rgb(28, 31, 30);

}

.btn.hover-border-4:hover::before,

.btn.hover-border-4:hover::after {

width: 100%; height: 99%;

opacity: 1;

transition: width 0.2s 0.15s ease-out, height 0.15s ease-in, opacity 0s;

}

/* 15. hover-border-5 */

.btn.hover-border-5::before,

.btn.hover-border-5::after {

width: 0%; height: 0%;

opacity: 0;

}

.btn.hover-border-5::before {

top: 0; right: 0;

border-top: 1px solid rgb(28, 31, 30);

border-left: 1px solid rgb(28, 31, 30);

transition: width 0.2s 0.5s ease-out, height 0.15s 0.35s linear;

}

.btn.hover-border-5::after {

bottom: 0; left: 0px;

border-bottom: 1px solid rgb(28, 31, 30);

border-right: 1px solid rgb(28, 31, 30);

transition: width 0.2s 0.15s linear, height 0.15s ease-in;

}

.btn.hover-border-5:hover::before,

.btn.hover-border-5:hover::after {

width: 100%; height: 96%;

opacity: 1;

}

.btn.hover-border-5:hover::before {

/*该动画宽度延伸时间0.2s,固高度延迟0.2s后在执行动画，执行时间0.15s*/

transition: width 0.2s ease-in, height 0.15s 0.2s linear /* 1,2 */

}

.btn.hover-border-5:hover::after {

/*上边框延伸时间0.2s+0.15s,固宽度延迟0.35s后在执行动画，高度同理，延迟0.5s后执行*/

transition: width 0.2s 0.35s linear, height 0.15s 0.5s ease-out;

}




[]( )四、更多样的设计方式

=============================================================================



[]( )1.最终效果![请添加图片描述](https://img-blog.csdnimg.cn/8d67295865fd4c8997bcb623709af5be.gif)

-----------------------------------------------------------------------------------------------------------------------------------------------------



[]( )2.与之前的相同之处

-----------------------------------------------------------------------------



  html文件中的内容及按钮的初始与前几种按钮相同，就不赘述了  

btn04.html

<meta charset="UTF-8">

<title>button02</title>

<link rel="stylesheet" href="btn04.css">

<button class="btn btn-4 hover-border-6">

    <span>hover me</span>

</button>

<button class="btn btn-4 hover-border-7">

    <span>hover me</span>

</button>

<button class="btn btn-4 hover-border-8">

    <span>hover me</span>

</button>

<button class="btn btn-4 hover-border-9">

    <span>hover me</span>

</button>

<button class="btn btn-4 hover-border-10">

    <span>hover me</span>

</button>




btn04.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%;

-webkit-transform: translate(-50%, -50%);

-moz-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

-o-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.btn {

position: relative;

display: inline-block;

width: auto; height: auto;

background-color: transparent;

border: none;

cursor: pointer;

margin: 0 auto;

min-width: 100px;

}

.btn span {

position: relative;

display: inline-block;

font-size: 14px;

font-weight: bold;

letter-spacing: 2px;

text-transform: uppercase;

top: 0; left: 0;

width: 100%;

padding: 15px 20px;

transition: 0.3s;

}




[]( )3.不同之处

-------------------------------------------------------------------------



![请添加图片描述](https://img-blog.csdnimg.cn/24cb3caf868149c1a7ddeba957524c43.png)  

![请添加图片描述](https://img-blog.csdnimg.cn/dfebc10e0f3a479cb4a2c022fadd8ee6.png)



  可以看到在动画开始之前就是有一部分边框的。左半部分为::before插入的内容,右半部分为::after插入的内容。  

  我们将盒子一份为2，两边原理相同。以左侧为例子。  

  使用btn03中设置边框的方式，我们最多只能更改2个盒子的样式设计出不同的边框。  

  而在该按钮中，我们在span元素前后也插入盒子，辅助我们边框的变换。  

  由此我们就可以通过设置四个盒子的变化，设计出更多花式的按钮效果。  

**btn04.css**  

首先，设置文本的样式，并在span及button前后插入内容。  

在这里，我们的上边框为`.btn-4::before/after`盒子本身，设置较低的像素使其看起来像一条线。

/— btn-4 —/

.btn-4 span {

color: rgb(28, 31, 30);

background-color: rgb(245,245,245);

}

span:before,

span:after{

position: absolute;

content: "";

}

.btn-4::before,

.btn-4::after {

position: absolute;

content: "";

width: 15%; height: 2px;

background-color: rgb(28, 31, 30);

z-index: 2;

}




运行效果：  

![请添加图片描述](https://img-blog.csdnimg.cn/400decf9767548ddb98342ee579fc2e4.png)



[]( )4.设置hover样式

------------------------------------------------------------------------------



首先使上边框的两条线居中，各向中间偏移50%即可  

**btn04.css**

/* 16. hover-border-6 */

.btn.hover-border-6::before,

.btn.hover-border-6::after {

top: 0;

transition: width 0.2s 0.35s ease-out;

}

.btn.hover-border-6::before {

right: 50%;

}

.btn.hover-border-6::after {

left: 50%;

}




运行效果：  

![请添加图片描述](https://img-blog.csdnimg.cn/8019fb9430b740f3b5b7c8e9cf384f17.png)



接着，设置上边框的hover样式，使其原本15%的宽度，hover后转为50%即可。  

**btn04.css**  

加上如下代码：

.btn.hover-border-6:hover::before,

.btn.hover-border-6:hover::after {

width: 50%;

transition: width 0.2s ease-in;

}




运行效果：



然后，我们以如btn03中改变边框的方式改变`span:before/after`两个盒子的边框，达成最终效果，左边的盒子先执行左边框的动画，在执行底边框的动画，右盒子先执行右边框的动画，在执行底边框的动画，`注意动画执行时间要在上一个动画完成之后`。![请添加图片描述](https://img-blog.csdnimg.cn/72688e339f144f54b8f80baa2f8083fd.gif)  

。

.btn.hover-border-6 span::before,

.btn.hover-border-6 span::after {

width: 0%; height: 0%;

background: transparent;

opacity: 0;

z-index: 2;

transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;

}

.btn.hover-border-6 span::before {

top: 0; left: 0;

border-left: 2px solid rgb(54, 56, 55);

border-bottom: 2px solid rgb(54, 56, 55);

}

.btn.hover-border-6 span::after {

top: 0; right: 0;

border-right: 2px solid rgb(54, 56, 55);

border-bottom: 2px solid rgb(54, 56, 55);

}

.btn.hover-border-6 span:hover::before,

.btn.hover-border-6 span:hover::after {

width: 50%; height: 96%;

opacity: 1;

transition: height 0.2s 0.2s ease-in, width 0.2s 0.4s linear, opacity 0s 0.2s;

}




最终效果：  

![请添加图片描述](https://img-blog.csdnimg.cn/a47653e31ecc47d7a3a4e5ec9c00d79b.gif)



[]( )5.全部代码

-------------------------------------------------------------------------



  五个按钮的原理基本相同，第2、3、4、5个按钮在1的基础上通过改变刚开始线的位置，设置不同的动画执行时间达成效果，由于篇幅限制，仅对第一种进行详解。  

**btn04.html**

<meta charset="UTF-8">

<title>button02</title>

<link rel="stylesheet" href="btn04.css">

<button class="btn btn-4 hover-border-6">

    <span>hover me</span>

</button>

<button class="btn btn-4 hover-border-7">

    <span>hover me</span>

</button>

<button class="btn btn-4 hover-border-8">

    <span>hover me</span>

</button>

<button class="btn btn-4 hover-border-9">

    <span>hover me</span>

</button>

<button class="btn btn-4 hover-border-10">

    <span>hover me</span>

</button>




**btn04.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%;

-webkit-transform: translate(-50%, -50%);

-moz-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

-o-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.btn {

position: relative;

display: inline-block;

width: auto; height: auto;

background-color: transparent;

border: none;

cursor: pointer;

margin: 0 auto;

min-width: 100px;

}

.btn span {

position: relative;

display: inline-block;

font-size: 14px;

font-weight: bold;

letter-spacing: 2px;

text-transform: uppercase;

top: 0; left: 0;

width: 100%;

padding: 15px 20px;

transition: 0.3s;

}

/— btn-4 —/

.btn-4 span {

color: rgb(28, 31, 30);

background-color: rgb(245,245,245);

}

span:before,

span:after{

position: absolute;

content: "";

}

.btn-4::before,

.btn-4::after {

position: absolute;

content: "";

width: 15%; height: 2px;

background-color: rgb(28, 31, 30);

z-index: 2;

}

/* 16. hover-border-6 */

.btn.hover-border-6::before,

.btn.hover-border-6::after {

top: 0;

transition: width 0.2s 0.35s ease-out;

}

.btn.hover-border-6::before {

right: 50%;

}

.btn.hover-border-6::after {

left: 50%;

}

.btn.hover-border-6:hover::before,

.btn.hover-border-6:hover::after {

width: 50%;

transition: width 0.2s ease-in;

}

.btn.hover-border-6 span::before,

.btn.hover-border-6 span::after {

width: 0%; height: 0%;

background: transparent;

opacity: 0;

z-index: 2;

transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;

}

.btn.hover-border-6 span::before {

top: 0; left: 0;

border-left: 2px solid rgb(54, 56, 55);

border-bottom: 2px solid rgb(54, 56, 55);

}

.btn.hover-border-6 span::after {

top: 0; right: 0;

border-right: 2px solid rgb(54, 56, 55);

border-bottom: 2px solid rgb(54, 56, 55);

}

.btn.hover-border-6 span:hover::before,

.btn.hover-border-6 span:hover::after {

width: 50%; height: 96%;

opacity: 1;

transition: height 0.2s 0.2s ease-in, width 0.2s 0.4s linear, opacity 0s 0.2s;

}

/* 17. hover-border-7 */

.btn.hover-border-7::before,

.btn.hover-border-7::after {

bottom: 0;

transition: width 0.2s 0.35s ease-out;

}

.btn.hover-border-7::before {

right: 50%;

}

.btn.hover-border-7::after {

left: 50%;

}

.btn.hover-border-7:hover::before,

.btn.hover-border-7:hover::after {

width: 50%;

transition: width 0.2s ease-in;

}

.btn.hover-border-7 span::before,

.btn.hover-border-7 span::after {

width: 0%; height: 0%;

background: transparent;

opacity: 0;

z-index: 2;

transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;

}

.btn.hover-border-7 span::before {

bottom: 0; left: 0;

border-left: 2px solid rgb(54, 56, 55);

border-top: 2px solid rgb(54, 56, 55);

}

.btn.hover-border-7 span::after {

bottom: 0; right: 0;

border-right: 2px solid rgb(54, 56, 55);

border-top: 2px solid rgb(54, 56, 55);

}

.btn.hover-border-7 span:hover::before,

.btn.hover-border-7 span:hover::after {

width: 50%; height: 96%;

opacity: 1;

transition: height 0.2s 0.2s ease-in, width 0.2s 0.4s linear, opacity 0s 0.2s;

}

/* 18. hover-border-8 */

.btn.hover-border-8::before,

.btn.hover-border-8::after {

bottom: 0;

width: 15%;

transition: width 0.2s 0.35s ease-out;

}

.btn.hover-border-8::before {

right: 50%;

}

.btn.hover-border-8::after {

left: 50%;

}

.btn.hover-border-8:hover::before {

width: 50%;

transition: width 0.2s ease-in;

}

.btn.hover-border-8:hover::after {

width: 50%;

transition: width 0.1s ease-in;

}

.btn.hover-border-8 span::before,

.btn.hover-border-8 span::after {

width: 0%; height: 0%;

bottom: 0;

background: transparent;

opacity: 0;

z-index: 2;

}

.btn.hover-border-8 span::before {

left: 0%;

border-left: 2px solid rgb(54, 56, 55);

transition: height 0.25s ease-in, opacity 0s 0.35s;

}

.btn.hover-border-8 span:hover::before {

height: 96%;

opacity: 1;

transition: height 0.25s 0.2s ease-out, opacity 0s 0.2s;

}

.btn.hover-border-8 span::after {

right: 0%;

border-right: 2px solid rgb(54, 56, 55);

border-top: 2px solid rgb(54, 56, 55);

transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;

}

.btn.hover-border-8 span:hover::after {

width: 99%; height: 96%;

opacity: 1;

transition: height 0.15s 0.1s linear, width 0.2s 0.25s linear, opacity 0s 0.1s;

}

/* 19. hover-border-9 */

.btn.hover-border-9::before,

.btn.hover-border-9::after {

bottom: 0;

width: 15%;

transition: width 0.2s 0.35s ease-out;

}

.btn.hover-border-9::before {

right: 50%;

}

.btn.hover-border-9::after {

left: 50%;

}

.btn.hover-border-9:hover::before {

width: 50%;

transition: width 0.1s ease-in;

}

.btn.hover-border-9:hover::after {

width: 50%;

transition: width 0.2s ease-in;

}

.btn.hover-border-9 span::before,

.btn.hover-border-9 span::after {

width: 0%; height: 0%;

bottom: 0;

background: transparent;

opacity: 0;

z-index: 2;

}

.btn.hover-border-9 span::after {

right: 0%;

border-right: 2px solid rgb(54, 56, 55);

transition: height 0.25s ease-in, opacity 0s 0.35s;

}

.btn.hover-border-9 span:hover::after {

height: 96%;

opacity: 1;

transition: height 0.25s 0.2s ease-out, opacity 0s 0.2s;

}

.btn.hover-border-9 span::before {

left: 0%;

border-left: 2px solid rgb(54, 56, 55);

border-top: 2px solid rgb(54, 56, 55);

transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;

}

.btn.hover-border-9 span:hover::before {

width: 98.5%; height: 96%;

opacity: 1;

transition: height 0.15s 0.1s linear, width 0.2s 0.25s linear, opacity 0s 0.1s;

}

/* 20. hover-border-10 */

.btn.hover-border-10::before,

.btn.hover-border-10::after {

left: 0%;

height: 30%;

width: 2px;

transition: height 0.2s 0.35s ease-out;

}

.btn.hover-border-10::before {

top: 50%;

}

.btn.hover-border-10::after {

bottom: 50%;

}

.btn.hover-border-10:hover::before {

height: 50%;

transition: height 0.2s ease-in;

}

.btn.hover-border-10:hover::after {

height: 50%;

transition: height 0.1s ease-in;

}

.btn.hover-border-10 span::before,

.btn.hover-border-10 span::after {

width: 0%; height: 0%;

background: transparent;

opacity: 0;

z-index: 2;

}

.btn.hover-border-10 span::after {

bottom: 0; left: 0%;

border-bottom: 2px solid rgb(54, 56, 55);

transition: width 0.25s ease-in, opacity 0s 0.35s;

}

.btn.hover-border-10 span:hover::after {

width: 100%;

opacity: 1;

transition: width 0.25s 0.2s ease-out, opacity 0s 0.2s;

}

.btn.hover-border-10 span::before {

top: 0%; left: 0%;

border-top: 2px solid rgb(54, 56, 55);

border-right: 2px solid rgb(54, 56, 55);

transition: height 0.15s ease-in, width 0.2s 0.15s linear, opacity 0s 0.35s;

}

.btn.hover-border-10 span:hover::before {

width: 98.5%; height: 96%;

opacity: 1;

transition: width 0.2s 0.1s linear, height 0.15s 0.3s ease-out, opacity 0s 0.1s;

}




[]( )五、综合

=======================================================================



经过以上四种类型按钮的实验，相信大家已经有了很深的认识，接下来这个按钮，是之前按钮的，一个综合。大家观察观察代码，思考一下实现方式。  

运行效果：  

![请添加图片描述](https://img-blog.csdnimg.cn/91870ff1c4714c73ab29ea73bcf56adc.gif)



**btn05.html**

<meta charset="UTF-8">

<title>button05</title>

<link rel="stylesheet" href="btn04.css">

<button class="btn btn-5 hover-border-11">

    <span>hover me</span>

</button>




**btn05.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%;

-webkit-transform: translate(-50%, -50%);

-moz-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

-o-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.btn {

position: relative;

display: inline-block;

width: auto; height: auto;

background-color: transparent;

border: none;

cursor: pointer;

margin: 0 auto;

min-width: 100px;

}

.btn span {

position: relative;

display: inline-block;

font-size: 14px;

font-weight: bold;

letter-spacing: 2px;

text-transform: uppercase;

top: 0; left: 0;

width: 100%;

padding: 15px 20px;

transition: 0.3s;

}

::before,

::after {

position: absolute;

content: "";

}

/— btn-5 —/

.btn-5 span {

color: rgb(28, 31, 30);

border: 2px solid rgb(249, 211, 27);

transition: 0.2s;

}

.btn-5 span:hover {

background-color: rgb(245,245,245);

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

.btn.hover-border-10 span:hover::before {

width: 98.5%; height: 96%;

opacity: 1;

transition: width 0.2s 0.1s linear, height 0.15s 0.3s ease-out, opacity 0s 0.1s;

}




[]( )五、综合

=======================================================================



经过以上四种类型按钮的实验，相信大家已经有了很深的认识，接下来这个按钮，是之前按钮的，一个综合。大家观察观察代码，思考一下实现方式。  

运行效果：  

![请添加图片描述](https://img-blog.csdnimg.cn/91870ff1c4714c73ab29ea73bcf56adc.gif)



**btn05.html**

<meta charset="UTF-8">

<title>button05</title>

<link rel="stylesheet" href="btn04.css">

<button class="btn btn-5 hover-border-11">

    <span>hover me</span>

</button>




**btn05.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%;

-webkit-transform: translate(-50%, -50%);

-moz-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

-o-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.btn {

position: relative;

display: inline-block;

width: auto; height: auto;

background-color: transparent;

border: none;

cursor: pointer;

margin: 0 auto;

min-width: 100px;

}

.btn span {

position: relative;

display: inline-block;

font-size: 14px;

font-weight: bold;

letter-spacing: 2px;

text-transform: uppercase;

top: 0; left: 0;

width: 100%;

padding: 15px 20px;

transition: 0.3s;

}

::before,

::after {

position: absolute;

content: "";

}

/— btn-5 —/

.btn-5 span {

color: rgb(28, 31, 30);

border: 2px solid rgb(249, 211, 27);

transition: 0.2s;

}

.btn-5 span:hover {

background-color: rgb(245,245,245);

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

[外链图片转存中…(img-v6u4KPkm-1715062969564)]

[外链图片转存中…(img-haSseADr-1715062969565)]

[外链图片转存中…(img-mhWylsdG-1715062969565)]

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！