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

最新推荐文章于 2024-05-31 11:02:10 发布
最新推荐文章于 2024-05-31 11:02:10 发布
阅读量1.3k 收藏 24
点赞数 25
分类专栏： 程序员 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78145364/article/details/138934083
版权

*/

.btn-holder{

position: absolute ;

top: 50%;

left: 50%;

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

}




运行效果:  

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



[]( )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;

}




运行效果：  

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



### []( )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;

}




运行效果：  

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



### []( )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之前。  

运行效果：  

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



[]( )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选择器插入的内容设置宽高后的样子。  

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

运行效果：  

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



### []( )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%;

}




运行效果：  

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



### []( )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;

}




运行效果：  

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



[]( )6.全部代码

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



**btn01.html**




<meta charset="UTF-8">

<title>button01</title>

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

<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>




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

}

.btn {

/*每个按钮应在页面中占有自己的位置，因此选择相对定位*/

position: relative;

/*使元素填满父级元素*/

display: inline-block;

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

width: auto; height: auto;

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

background-color: transparent;

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;

}

/— btn-1 —/

/*

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

position: absolute;绝对定位，相对最近的父元素（btn-holder）来定位，不保留原有空间，并且不会影响其他元素位置

ease-out : 运动形式为减速*/

.btn-1::before {

position: absolute;

content: "";

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

transition: 0.3s ease-out;

}

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

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

最后

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

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

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

img

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

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

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

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

最后

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

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

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

[外链图片转存中…(img-MPbFvXpC-1715800155421)]

[外链图片转存中…(img-WTbT1FQQ-1715800155421)]

[外链图片转存中…(img-lFFZsfwH-1715800155421)]

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

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

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

2301_78145364
关注
  • 25
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML按钮的写法、样式
LILI_JU88的博客
08-26 1万+
新建一个Html文件 在<head>里写入一个内部样式 <style> 第一方法在body写入<button>标签，该标签在HTML5中定义的是一个按钮的 在<button>标签内写入文字或设置样式,不设置可能会到导致<button>在页面中显示不出来 样式主要以尺寸、字体、背景 button{ width: 60px; height: 20px; font-size: 12px; text-decoration: underl...
从实战中学前端：html+css实现漂亮的按钮
weixin_34110749的博客
11-14 1785
2019独角兽企业重金招聘Python工程师标准>>> ...
6款漂亮HTML CSS样式用户留言表单
下雨天__的专栏
07-17 4537
如今我们的网站、页面更加需要注重细节，不论是字体的样式、还是图片的分辨率清晰度都会影响到用户的访问体验和PV，以及用户以后是否会回访我们的网站/博客。如果有时间的时候，老左也会浏览和阅读相关的前端网站和积累一些不错的前端资源，在"8款设计师常用漂亮的HTML CSS表格样式"中展示了几款不错的价格列表，在这篇文章中整理6个用户留言HTML CSS样式。 标记 首先我们要在网页中加上
1、css3 动态button展示学习
最新发布
cyz141001的博客
05-31 305
【代码】1、css3 动态button展示学习。
一定能用到的简单但实用的五种按钮样式（HTML+CSS步骤详解，含详细注释）
澎湖Java架构师的博客
05-18 3468
前言一 按钮在前端开发中往往是一个必不可少的元素，也有许多精美好看的样式资源供开发者直接使用。但博主认为，对于初学者而言，总是去cv别人做好的，而不理解其中的原理，是很不好的。 本人作为一名计科的学生，在大二也选修了校内的前端基础教程的课，但由于课时较短，老师往往不会深入讲解，许多问题无法深究。 本篇文章将会详细讲解xia五种简单的按钮样式，虽然简单，但作为基础，也很实用，且有着大学问。 文章目录 前言一 开始之前 一、鼠标悬浮，按钮背景滑动（1） 1.最终效果 2.创建元素 3. 重置浏览器样式，
「HTML+CSS」--自定义按钮样式【001】
海到无边天作岸 山登绝顶我为峰
03-27 7105
前言 Hello！小伙伴！ 首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 哈哈 自我介绍一下 昵称：海轰 标签：程序猿一只｜C++选手｜学生 简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～） 学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！ 日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～ 效果展示 思路 上面效果可以概括为： 鼠标未停
操作元素之修改样式属性
leechoy
06-12 635
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
HTML 开关按钮
weixin_52707625的博客
06-16 6374
HTML制作开关按钮
几款好看的HTML按钮样式
热门推荐
崔小花的专栏
11-05 11万+
给大家介绍几款好看的HTML按钮样式 按钮样式一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19...
html 按键样式大全,几款不错的按钮样式汇总
weixin_36352910的博客
06-10 2774
几款不错的按钮样式汇总* html .btn i { float: left; width: auto; background-image: none; cursor: pointer; }.btn.blue { background: #2ae; }.btn.green { background: #9d4; }.btn.pink { background: #e1a; }.btn:hover ...
html button形状,【8个实例】纯CSS按钮(button)，简单漂亮实用
weixin_30670103的博客
06-03 6063
本文介绍6个纯CSS按钮(button)实例，漂亮又实用，代码使用简单，又具有很强的可迁性，基本上在任何一张网页都能很容易就能用上这些按钮样式。纯CSS按钮(button)实例1：普通按钮创建一个普通按钮，只需在或元素添加pure-button类。普通按钮普通按钮实例2：不可用按钮(disabled button)要创建一个不可用按钮，只需在元素里添加pure-button类和pure-butto...
HTML简单的按钮样式
weixin_51774330的博客
11-09 387
HTML简单的按钮设计
【HTML5+CSS】美观的button设置
只识闲人不识君博客
04-18 3万+
一、 首先我们要创建一个button按钮，如我们所知，没有经过设置的按钮比较不美观。如图所示 **二、**例子1 如果我们想要将它变得好看一些，就需要对它进行设置。 以华为官网注册的按钮为例： 首先它是红色，当点击会有悬停变色。而且我们需要进行设置宽高，字体颜色，背景颜色。 button{ background-color:#f66f6a; co...
html5按钮自动特效,如何使用HTML5+css3制作出12种常用的按钮开关样式（附完整代码）...
weixin_29745609的博客
06-02 686
各式各样的按钮*{margin: 0;padding: 0;}.wrap{width: 600px;height: 400px;margin: 0 auto;/*background: pink;*/padding: 30px 50px;}/*div按钮*/.button5{width: 100px;height: 30px;float: left;/*position: absolute;*/t...
HTML + CSS各种好看按钮组件
我的博客
06-23 1513
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>Animation Buttons</h1> <p>Hover us and enjoy the satisfying neumorphic animation designs
HTML自定义选取按钮（input样式的按钮）
legendaryhaha的博客
10-27 3万+
自定义文件上传按钮 谷歌浏览器下，默认的按钮是这个样子的： 火狐浏览器下是酱紫的： IE浏览器下是这个样子的： 个人表示真的丑陋，无法接受！ 修改 首先 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt
html按钮样式_Foundation 按钮
weixin_39909001的博客
12-01 209
Foundation 按钮按钮样式Foundation 提供了 6 种按钮样式。 .button 类创建了一个蓝色的按钮并附有内边距。不同颜色按钮类为： .secondary,.success, .info, .warning 或 .alert <!DOCTYPE html><html><head><title>Foundation 实例</t...
几款好看的HTML按钮样式,几款经典漂亮按钮的css式样
weixin_39633954的博客
06-24 1323
.btn{border-right: #7b9ebd 1px solid;padding-right: 2px;border-top: #7b9ebd 1px solid;padding-left: 2px;font-size: 12px;FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorSt...
原生html+css 手写滚动条
05-30
好的，以下是一个基本的原生HTML+CSS手写滚动条的示例： HTML代码： ``` <div class="scrollable"> <div class="content"> <!-- 这里是你的内容 --> </div> </div> ``` CSS代码： ``` /* 滚动条容器 */ .scrollable { position: relative; height: 200px; /* 容器高度 */ overflow: auto; /* 开启滚动条 */ } /* 滚动条轨道 */ .scrollable::-webkit-scrollbar-track { background-color: #f5f5f5; /* 轨道背景色 */ border-radius: 10px; /* 轨道圆角 */ } /* 滚动条滑块 */ .scrollable::-webkit-scrollbar-thumb { background-color: #007bff; /* 滑块颜色 */ border-radius: 10px; /* 滑块圆角 */ } /* 滚动条鼠标悬停时的滑块样式 */ .scrollable::-webkit-scrollbar-thumb:hover { background-color: #0062cc; /* 滑块颜色 */ } /* 滚动条宽度和高度 */ .scrollable::-webkit-scrollbar { width: 10px; height: 10px; } ``` 这个示例使用了 WebKit 浏览器的滚动条样式设置，因此只适用于基于 WebKit 的浏览器（如 Chrome、Safari 等），如果需要兼容更多浏览器，可以使用 JavaScript 实现自定义的滚动条。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值