【前端系列】36种button样式

article/2025/11/8 23:49:54

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
img

  • 推荐:kuan 的首页,持续学习,不断总结,共同进步,活到老学到老
  • 导航
    • 檀越剑指大厂系列:全面总结 java 核心技术点,如集合,jvm,并发编程 redis,kafka,Spring,微服务,Netty 等
    • 常用开发工具系列:罗列常用的开发工具,如 IDEA,Mac,Alfred,electerm,Git,typora,apifox 等
    • 数据库系列:详细总结了常用数据库 mysql 技术点,以及工作中遇到的 mysql 问题等
    • 懒人运维系列:总结好用的命令,解放双手不香吗?能用一个命令完成绝不用两个操作
    • 数据结构与算法系列:总结数据结构和算法,不同类型针对性训练,提升编程思维,剑指大厂

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

博客目录

    • 1.效果图
    • 2.详细代码
    • 3.button 种类
    • 4.button 的添加

1.效果图

image-20220912195215348

2.详细代码

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>36种漂亮的CSS3网页按钮Button样式</title>
<style type="text/css">
body{
background: #f5faff;
}
.demo_con{
width: 960px;
margin:40px auto 0;
}
.button{
width: 140px;
line-height: 38px;
text-align: center;
font-weight: bold;
color: #fff;
text-shadow:1px 1px 1px #333;
border-radius: 5px;
margin:0 20px 20px 0;
position: relative;
overflow: hidden;
}
.button:nth-child(6n){
margin-right: 0;
}
.button.gray{
color: #8c96a0;
text-shadow:1px 1px 1px #fff;
border:1px solid #dce1e6;
box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;
background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);
background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);
background: linear-gradient(top,#f2f3f7,#e4e8ec);
}
.button.black{
border:1px solid #333;
box-shadow: 0 1px 2px #8b8b8b inset,0 -1px 0 #3d3d3d inset,0 -2px 3px #8b8b8b inset;
background: -webkit-linear-gradient(top,#656565,#4c4c4c);
background: -moz-linear-gradient(top,#656565,#4a4a4a);
background: linear-gradient(top,#656565,#4a4a4a);
}
.button.red{
border:1px solid #b42323;
box-shadow: 0 1px 2px #e99494 inset,0 -1px 0 #954b4b inset,0 -2px 3px #e99494 inset;
background: -webkit-linear-gradient(top,#d53939,#b92929);
background: -moz-linear-gradient(top,#d53939,#b92929);
background: linear-gradient(top,#d53939,#b92929);
}
.button.yellow{
border:1px solid #d2a000;
box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
background: -webkit-linear-gradient(top,#fece34,#d8a605);
background: -moz-linear-gradient(top,#fece34,#d8a605);
background: linear-gradient(top,#fece34,#d8a605);
}
.button.green{
border:1px solid #64c878;
box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
background: -webkit-linear-gradient(top,#90dfa2,#84d494);
background: -moz-linear-gradient(top,#90dfa2,#84d494);
background: linear-gradient(top,#90dfa2,#84d494);
}
.button.blue{
border:1px solid #1e7db9;
box-shadow: 0 1px 2px #8fcaee inset,0 -1px 0 #497897 inset,0 -2px 3px #8fcaee inset;
background: -webkit-linear-gradient(top,#42a4e0,#2e88c0);
background: -moz-linear-gradient(top,#42a4e0,#2e88c0);
background: linear-gradient(top,#42a4e0,#2e88c0);
}
.round,.side,.tags{
padding-right: 30px;
}
.round:after{
position: absolute;
display: inline-block;
content: "\003c";
top:50%;
right:10px;
margin-top: -10px;
width: 17px;
height: 20px;
padding-left: 3px;
line-height:18px;
font-size: 10px;
font-weight: normal;
border-radius: 10px;
text-shadow:-2px 0 1px #333;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
transform:rotate(-90deg);
}
.gray.round:after{
box-shadow:1px 0 1px rgba(255,255,255,1) inset,1px 0 1px rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#dce1e6,#dde2e7);
background:-moz-linear-gradient(top,#dce1e6,#dde2e7);
background:linear-gradient(top,#dce1e6,#dde2e7);
text-shadow:-2px 0 1px #fff;
}
.black.round:after{
box-shadow:1px 0 1px rgba(255,255,255,.5) inset,1px 0 1px rgba(0,0,0,.9);
background:-webkit-linear-gradient(top,#333,#454545);
background:-moz-linear-gradient(top,#333,#454545);
background:linear-gradient(top,#333,#454545);
}
.red.round:after{
box-shadow:1px 0 1px rgba(255,255,255,.6) inset,1px 0 1px rgba(130,25,25,.9);
background:-webkit-linear-gradient(top,#b12222,#b42323);
background:-moz-linear-gradient(top,#b12222,#b42323);
background:linear-gradient(top,#b12222,#b42323);
}
.yellow.round:after{
box-shadow:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(148,131,4,.9);
background:-webkit-linear-gradient(top,#cf9d00,#d2a000);
background:-moz-linear-gradient(top,#cf9d00,#d2a000);
background:linear-gradient(top,#cf9d00,#d2a000);
}
.green.round:after{
box-shadow:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(51,126,66,.9);
background:-webkit-linear-gradient(top,#64c878,#6dcb80);
background:-moz-linear-gradient(top,#64c878,#6dcb80);
background:linear-gradient(top,#64c878,#6dcb80);
}
.blue.round:after{
box-shadow:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(18,85,128,.9);
background:-webkit-linear-gradient(top,#1e7db9,#2b85bd);
background:-moz-linear-gradient(top,#1e7db9,#2b85bd);
background:linear-gradient(top,#1e7db9,#2b85bd);
}
.side:after{
position: absolute;
display: inline-block;
content: "\00bb";
top:3px;
right:-4px;
width: 38px;
height:30px;
font-weight: normal;
line-height: 26px;
border-radius:0 0 5px 5px;
text-shadow:-2px 0 1px #333;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
transform:rotate(-90deg);
}
.gray.side:after{
text-shadow:-2px 0 1px #fff;
border-top: 1px solid #d4d4d4;
box-shadow:-2px 0 1px #eceef1 inset;
background:-webkit-linear-gradient(right,#e1e6ea,#f2f2f6 60%);
background:-moz-linear-gradient(right,#e1e6ea,#f2f2f6 60%);
background:linear-gradient(right,#e1e6ea,#f2f2f6 60%);
}
.black.side:after{
border-top: 1px solid #222;
box-shadow:-2px 0 1px #606060 inset;
background:-webkit-linear-gradient(right,#373737,#555 60%);
background:-moz-linear-gradient(right,#373737,#555 60%);
background:linear-gradient(right,#373737,#555 60%);
}
.red.side:after{
border-top: 1px solid #aa1e1e;
box-shadow:-2px 0 1px #c75959 inset;
background:-webkit-linear-gradient(right,#b82929,#d73f3f 60%);
background:-moz-linear-gradient(top,#b82929,#d73f3f 60%);
background:linear-gradient(top,#b82929,#d73f3f 60%);
}
.yellow.side:after{
border-top: 1px solid #ba8f06;
box-shadow:-2px 0 1px #deb842 inset;
background:-webkit-linear-gradient(right,#d5a406,#fdc40b 60%);
background:-moz-linear-gradient(right,#d5a406,#fdc40b 60%);
background:linear-gradient(right,#d5a406,#fdc40b 60%);
}
.green.side:after{
border-top: 1px solid #53b567;
box-shadow:-2px 0 1px #8ad599 inset;
background:-webkit-linear-gradient(right,#69ca7c,#91e5a5 60%);
background:-moz-linear-gradient(right,#69ca7c,#91e5a5 60%);
background:linear-gradient(right,#69ca7c,#91e5a5 60%);
}
.blue.side:after{
border-top: 1px solid #1971a8;
box-shadow:-2px 0 1px #559dca inset;
background:-webkit-linear-gradient(right,#2482bd,#3fa2e0 60%);
background:-moz-linear-gradient(right,#2482bd,#3fa2e0 60%);
background:linear-gradient(right,#2482bd,#3fa2e0 60%);
}
.tags:after{
font-weight: normal;
position: absolute;
display: inline-block;
content: "FREE";
top:-3px;
right: -33px;
color: #fff;
text-shadow:none;
width: 85px;
height:25px;
line-height: 28px;
-webkit-transform:rotate(45deg) scale(.7,.7);
-moz-transform:rotate(45deg) scale(.7,.7);
transform:rotate(45deg) scale(.7,.7);
}
.gray.tags:after{
background: #8c96a0;
border:2px solid #fff;
}
.black.tags:after{
background: #333;
border:2px solid #777;
}
.red.tags:after{
background: #b42323;
border:2px solid #df4141;
}
.yellow.tags:after{
background: #d2a000;
border:2px solid #fcc100;
}
.green.tags:after{
background: #64c878;
border:2px solid #9bebac;
}
.blue.tags:after{
background: #1e7db9;
border:2px solid #54b1e9;
}
.button.rarrow,.button.larrow{
overflow:visible;
}
.rarrow:after,.rarrow:before,.larrow:after,.larrow:before{
position:absolute;
content: "";
display: block;
width: 28px;
height: 28px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
}
.rarrow:before{
width: 27px;
height: 27px;
top: 6px;
right: -13px;
clip: rect(auto auto 26px 2px);
}
.rarrow:after{
top: 6px;
right: -12px;
clip: rect(auto auto 26px 2px);
}
.gray.rarrow:before{
background: #d6dbe0;
}
.gray.rarrow:after{
box-shadow: 0 1px 0 #fff inset,-1px 0 0 #b7babd inset;
background:-webkit-linear-gradient(top left,#f2f3f7,#e4e8ec);
background:-moz-linear-gradient(top left,#f2f3f7,#e4e8ec);
background:linear-gradient(top left,#f2f3f7,#e4e8ec);
}
.black.rarrow:before{
background: #333;
}
.black.rarrow:after{
box-shadow: 0 1px 0 #8B8B8B inset,-1px 0 0 #3d3d3d inset,-2px 0 0 #8B8B8B inset;
background:-webkit-linear-gradient(top left,#656565,#4C4C4C);
background:-moz-linear-gradient(top left,#656565,#4C4C4C);
background:linear-gradient(top left,#656565,#4C4C4C);
}
.red.rarrow:before{
background: #B42323;
}
.red.rarrow:after{
box-shadow: 0 1px 0 #E99494 inset,-1px 0 0 #954B4B inset,-2px 0 0 #E99494 inset;
background:-webkit-linear-gradient(top left,#D53939,#B92929);
background:-moz-linear-gradient(top left,#D53939,#B92929);
background:linear-gradient(top left,#D53939,#B92929);
}
.yellow.rarrow:before{
background: #D2A000;
}
.yellow.rarrow:after{
box-shadow: 0 1px 0 #FEDD71 inset,-1px 0 0 #A38B39 inset,-2px 0 0 #FEDD71 inset;
background:-webkit-linear-gradient(top left,#FECE34,#D8A605);
background:-moz-linear-gradient(top left,#FECE34,#D8A605);
background:linear-gradient(top left,#FECE34,#D8A605);
}
.green.rarrow:before{
background: #64C878;
}
.green.rarrow:after{
box-shadow: 0 1px 0 #B9ECC4 inset,-1px 0 0 #6C9F76 inset,-2px 0 0 #B9ECC4 inset;
background:-webkit-linear-gradient(top left,#90DFA2,#84D494);
background:-moz-linear-gradient(top left,#90DFA2,#84D494);
background:linear-gradient(top left,#90DFA2,#84D494);
}
.blue.rarrow:before{
background: #1E7DB9;
}
.blue.rarrow:after{
box-shadow: 0 1px 0 #8FCAEE inset,-1px 0 0 #497897 inset,-2px 0 0 #8FCAEE inset;
background:-webkit-linear-gradient(top left,#42A4E0,#2E88C0);
background:-moz-linear-gradient(top left,#42A4E0,#2E88C0);
background:linear-gradient(top left,#42A4E0,#2E88C0);
}
.larrow:before{
top: 6px;
left: -13px;
width: 27px;
height: 27px;
clip: rect(2px 26px auto auto);
}
.larrow:after{
top: 6px;
left: -12px;
clip: rect(2px 26px auto auto);
}
.gray.larrow:before{
background: #d6dbe0;
}
.gray.larrow:after{
box-shadow: 0 -1px 0 #b7babd inset,1px 0 0 #fff inset;
background:-webkit-linear-gradient(top left,#f2f3f7,#e4e8ec);
background:-moz-linear-gradient(top left,#f2f3f7,#e4e8ec);
background:linear-gradient(top left,#f2f3f7,#e4e8ec);
}
.black.larrow:before{
background: #333;
}
.black.larrow:after{
box-shadow: 0 -1px 0 #3d3d3d inset,0 -2px 0 #8B8B8B inset,1px 0 0 #8B8B8B inset;
background:-webkit-linear-gradient(top left,#656565,#4C4C4C);
background:-moz-linear-gradient(top left,#656565,#4C4C4C);
background:linear-gradient(top left,#656565,#4C4C4C);
}
.red.larrow:before{
background: #B42323;
}
.red.larrow:after{
box-shadow: 0 -1px 0 #954B4B inset,0 -2px 0 #E99494 inset,1px 0 0 #E99494 inset;
background:-webkit-linear-gradient(top left,#D53939,#B92929);
background:-moz-linear-gradient(top left,#D53939,#B92929);
background:linear-gradient(top left,#D53939,#B92929);
}
.yellow.larrow:before{
background: #D2A000;
}
.yellow.larrow:after{
box-shadow: 0 -1px 0 #A38B39 inset,0 -2px 0 #FEDD71 inset,1px 0 0 #FEDD71 inset;
background:-webkit-linear-gradient(top left,#FECE34,#D8A605);
background:-moz-linear-gradient(top left,#FECE34,#D8A605);
background:linear-gradient(top left,#FECE34,#D8A605);
}
.green.larrow:before{
background: #64C878;
}
.green.larrow:after{
box-shadow: 0 -1px 0 #6C9F76 inset,0 -2px 0 #B9ECC4 inset,1px 0 0 #B9ECC4 inset;
background:-webkit-linear-gradient(top left,#90DFA2,#84D494);
background:-moz-linear-gradient(top left,#90DFA2,#84D494);
background:linear-gradient(top left,#90DFA2,#84D494);
}
.blue.larrow:before{
background: #1E7DB9;
}
.blue.larrow:after{
box-shadow: 0 -1px 0 #497897 inset,0 -2px 0 #8FCAEE inset,1px 0 0 #8FCAEE inset;
background:-webkit-linear-gradient(top left,#42A4E0,#2E88C0);
background:-moz-linear-gradient(top left,#42A4E0,#2E88C0);
background:linear-gradient(top left,#42A4E0,#2E88C0);
}
.gray:hover{
background: -webkit-linear-gradient(top,#fefefe,#ebeced);
background: -moz-linear-gradient(top,#f2f3f7,#ebeced);
background: linear-gradient(top,#f2f3f7,#ebeced);
}
.black:hover{
background: -webkit-linear-gradient(top,#818181,#575757);
background: -moz-linear-gradient(top,#818181,#575757);
background: linear-gradient(top,#818181,#575757);
}
.red:hover{
background: -webkit-linear-gradient(top,#eb6f6f,#c83c3c);
background: -moz-linear-gradient(top,#eb6f6f,#c83c3c);
background: linear-gradient(top,#eb6f6f,#c83c3c);
}
.yellow:hover{
background: -webkit-linear-gradient(top,#ffd859,#e3bb38);
background: -moz-linear-gradient(top,#ffd859,#e3bb38);
background: linear-gradient(top,#ffd859,#e3bb38);
}
.green:hover{
background: -webkit-linear-gradient(top,#aaebb9,#82d392);
background: -moz-linear-gradient(top,#aaebb9,#82d392);
background: linear-gradient(top,#aaebb9,#82d392);
}
.blue:hover{
background: -webkit-linear-gradient(top,#70bfef,#4097ce);
background: -moz-linear-gradient(top,#70bfef,#4097ce);
background: linear-gradient(top,#70bfef,#4097ce);
}
.gray:active{
top:1px;
box-shadow: 0 1px 3px #a8abae inset,0 3px 0 #fff;
background: -webkit-linear-gradient(top,#e4e8ec,#e4e8ec);
background: -moz-linear-gradient(top,#e4e8ec,#e4e8ec);
background: linear-gradient(top,#e4e8ec,#e4e8ec);
}
.black:active{
top:1px;
box-shadow: 0 1px 3px #111 inset,0 3px 0 #fff;
background: -webkit-linear-gradient(top,#424242,#575757);
background: -moz-linear-gradient(top,#424242,#575757);
background: linear-gradient(top,#424242,#575757);
}
.red:active{
top:1px;
box-shadow: 0 1px 3px #5b0505 inset,0 3px 0 #fff;
background: -webkit-linear-gradient(top,#b11a1a,#bf2626);
background: -moz-linear-gradient(top,#b11a1a,#bf2626);
background: linear-gradient(top,#b11a1a,#bf2626);
}
.yellow:active{
top:1px;
box-shadow: 0 1px 3px #816b1f inset,0 3px 0 #fff;
background: -webkit-linear-gradient(top,#d3a203,#dba907);
background: -moz-linear-gradient(top,#d3a203,#dba907);
background: linear-gradient(top,#d3a203,#dba907);
}
.green:active{
top:1px;
box-shadow: 0 1px 3px #4d7254 inset,0 3px 0 #fff;
background: -webkit-linear-gradient(top,#5eac6e,#72b37e);
background: -moz-linear-gradient(top,#5eac6e,#72b37e);
background: linear-gradient(top,#5eac6e,#72b37e);
}
.blue:active{
top:1px;
box-shadow: 0 1px 3px #114566 inset,0 3px 0 #fff;
background: -webkit-linear-gradient(top,#1a71a8,#1976b1);
background: -moz-linear-gradient(top,#1a71a8,#1976b1);
background: linear-gradient(top,#1a71a8,#1976b1);
}
.gray.side:hover:after{
background:-webkit-linear-gradient(right,#e7ebee,#f8f8f8 60%);
background:-moz-linear-gradient(right,#e7ebee,#f8f8f8 60%);
background:linear-gradient(right,#e7ebee,#f8f8f8 60%);
}
.black.side:hover:after{
background:-webkit-linear-gradient(right,#555,#6f6f6f 60%);
background:-moz-linear-gradient(right,#555,#6f6f6f 60%);
background:linear-gradient(right,#555,#6f6f6f 60%);
}
.red.side:hover:after{
background:-webkit-linear-gradient(right,#c43333,#dc4949 60%);
background:-moz-linear-gradient(right,#c43333,#dc4949 60%);
background:linear-gradient(right,#c43333,#dc4949 60%);
}
.yellow.side:hover:after{
background:-webkit-linear-gradient(right,#e1b21a,#fbc71d 60%);
background:-moz-linear-gradient(right,#e1b21a,#fbc71d 60%);
background:linear-gradient(right,#e1b21a,#fbc71d 60%);
}
.green.side:hover:after{
background:-webkit-linear-gradient(right,#85da95,#94e0a5 60%);
background:-moz-linear-gradient(right,#85da95,#94e0a5 60%);
background:linear-gradient(right,#85da95,#94e0a5 60%);
}
.blue.side:hover:after{
background:-webkit-linear-gradient(right,#338fc8,#56b2eb 60%);
background:-moz-linear-gradient(right,#338fc8,#56b2eb 60%);
background:linear-gradient(right,#338fc8,#56b2eb 60%);
}
.gray.side:active:after{
top:4px;
border-top: 1px solid #9fa6ab;
box-shadow:-1px 0 1px #a8abae inset;
background:-webkit-linear-gradient(right,#e4e8ec,#e4e8ec 60%);
background:-moz-linear-gradient(right,#e4e8ec,#e4e8ec 60%);
background:linear-gradient(right,#e4e8ec,#e4e8ec 60%);
}
.black.side:active:after{
box-shadow:-1px 0 1px #111 inset;
background:-webkit-linear-gradient(right,#414040,#4d4c4c 60%);
background:-moz-linear-gradient(right,#414040,#4d4c4c 60%);
background:linear-gradient(right,#414040,#4d4c4c 60%);
}
.red.side:active:after{
box-shadow:-1px 0 1px #4b0707 inset;
background:-webkit-linear-gradient(right,#b11a1a,#b11a1a 60%);
background:-moz-linear-gradient(right,#b11a1a,#b11a1a 60%);
background:linear-gradient(right,#b11a1a,#b11a1a 60%);
}
.yellow.side:active:after{
box-shadow:-1px 0 1px #816b1f inset;
background:-webkit-linear-gradient(right,#d3a203,#dba907 60%);
background:-moz-linear-gradient(right,#d3a203,#dba907 60%);
background:linear-gradient(right,#d3a203,#dba907 60%);
}
.green.side:active:after{
box-shadow:-1px 0 1px #33663d inset;
background:-webkit-linear-gradient(right,#63a870,#72b37e 60%);
background:-moz-linear-gradient(right,#63a870,#72b37e 60%);
background:linear-gradient(right,#63a870,#72b37e 60%);
}
.blue.side:active:after{
box-shadow:-1px 0 1px #114566 inset;
background:-webkit-linear-gradient(right,#1a71a8,#1976b1 60%);
background:-moz-linear-gradient(right,#1a71a8,#1976b1 60%);
background:linear-gradient(right,#1a71a8,#1976b1 60%);
}
.gray.rarrow:hover:after,.gray.rarrow:hover:after{
background:-webkit-linear-gradient(top left,#fefefe,#ebeced);
background:-moz-linear-gradient(top left,#fefefe,#ebeced);
background:linear-gradient(top left,#fefefe,#ebeced);
}
.black.rarrow:hover:after,.black.larrow:hover:after{
background:-webkit-linear-gradient(top left,#818181,#575757);
background:-moz-linear-gradient(top left,#818181,#575757);
background:linear-gradient(top left,#818181,#575757);
}
.red.rarrow:hover:after,.red.larrow:hover:after{
background:-webkit-linear-gradient(top left,#eb6f6f,#c83c3c);
background:-moz-linear-gradient(top left,#eb6f6f,#c83c3c);
background:linear-gradient(top left,#eb6f6f,#c83c3c);
}
.yellow.rarrow:hover:after,.yellow.larrow:hover:after{
background:-webkit-linear-gradient(top left,#ffd859,#e3bb38);
background:-moz-linear-gradient(top left,#ffd859,#e3bb38);
background:linear-gradient(top left,#ffd859,#e3bb38);
}
.green.rarrow:hover:after,.green.larrow:hover:after{
background:-webkit-linear-gradient(top left,#aaebb9,#82d392);
background:-moz-linear-gradient(top left,#aaebb9,#82d392);
background:linear-gradient(top left,#aaebb9,#82d392);
}
.blue.rarrow:hover:after,.blue.larrow:hover:after{
background:-webkit-linear-gradient(top left,#70bfef,#4097ce);
background:-moz-linear-gradient(top left,#70bfef,#4097ce);
background:linear-gradient(top left,#70bfef,#4097ce);
}
.gray.rarrow:active:after,.gray.larrow:active:after{
background:-webkit-linear-gradient(top left,#e4e8ec,#e4e8ec);
background:-moz-linear-gradient(top left,#e4e8ec,#e4e8ec);
background:linear-gradient(top left,#e4e8ec,#e4e8ec);
}
.black.rarrow:active:after,.black.larrow:active:after{
background:-webkit-linear-gradient(top left,#424242,#575757);
background:-moz-linear-gradient(top left,#424242,#575757);
background:linear-gradient(top left,#424242,#575757);
}
.red.rarrow:active:after,.red.larrow:active:after{
background:-webkit-linear-gradient(top left,#b11a1a,#bf2626);
background:-moz-linear-gradient(top left,#b11a1a,#bf2626);
background:linear-gradient(top left,#b11a1a,#bf2626);
}
.yellow.rarrow:active:after,.yellow.larrow:active:after{
background:-webkit-linear-gradient(top left,#d3a203,#dba907);
background:-moz-linear-gradient(top left,#d3a203,#dba907);
background:linear-gradient(top left,#d3a203,#dba907);
}
.green.rarrow:active:after,.green.larrow:active:after{
background:-webkit-linear-gradient(top left,#63a870,#72b37e);
background:-moz-linear-gradient(top left,#63a870,#72b37e);
background:linear-gradient(top left,#63a870,#72b37e);
}
.blue.rarrow:active:after,.blue.larrow:active:after{
background:-webkit-linear-gradient(top left,#1a71a8,#1976b1);
background:-moz-linear-gradient(top left,#1a71a8,#1976b1);
background:linear-gradient(top left,#1a71a8,#1976b1);
}
.gray.rarrow:active:after{
box-shadow: 0 1px 0 #b7babd inset,-1px 0 0 #b7babd inset;
}
.gray.larrow:active:after{
box-shadow: 0 -1px 0 #b7babd inset,1px 0 0 #b7babd inset;
}
.black.rarrow:active:after{
box-shadow: 0 1px 0 #333 inset,-1px 0 0 #333 inset;
}
.black.larrow:active:after{
box-shadow: 0 -1px 0 #333 inset,1px 0 0 #333 inset;
}
.red.rarrow:active:after{
box-shadow: 0 1px 0 #640909 inset,-1px 0 0 #640909 inset;
}
.red.larrow:active:after{
box-shadow: 0 -1px 0 #640909 inset,1px 0 0 #640909 inset;
}
.yellow.rarrow:active:after{
box-shadow: 0 1px 0 #816b1f inset,-1px 0 0 #816b1f inset;
}
.yellow.larrow:active:after{
box-shadow: 0 -1px 0 #816b1f inset,1px 0 0 #816b1f inset;
}
.green.rarrow:active:after{
box-shadow: 0 1px 0 #4d7254 inset,-1px 0 0 #4d7254 inset;
}
.green.larrow:active:after{
box-shadow: 0 -1px 0 #4d7254 inset,1px 0 0 #4d7254 inset;
}
.blue.rarrow:active:after{
box-shadow: 0 1px 0 #114566 inset,-1px 0 0 #114566 inset;
}
.blue.larrow:active:after{
box-shadow: 0 -1px 0 #114566 inset,1px 0 0 #114566 inset;
}</style>
</head>
<body>
<div class="page"><header id="header"><hgrounp class="white blank"><h1>36 Web Buttons Collection</h1><h2>作者：藤藤(如有更好建议或疑问请加群：1041263)<h2></hgrounp></header><section class="demo">
<div class="demo_con"><button type="button" class="button gray">BUY NOW</button><button type="button" class="button black">BUY NOW</button><button type="button" class="button red">BUY NOW</button><button type="button" class="button yellow">BUY NOW</button><button type="button" class="button green">BUY NOW</button><button type="button" class="button blue">BUY NOW</button><button type="button" class="button gray round">DOWNLOAD</button><button type="button" class="button black round">DOWNLOAD</button><button type="button" class="button red round">DOWNLOAD</button><button type="button" class="button yellow round">DOWNLOAD</button><button type="button" class="button green round">DOWNLOAD</button><button type="button" class="button blue round">DOWNLOAD</button><button type="button" class="button gray side">DOWNLOAD</button><button type="button" class="button black side">DOWNLOAD</button><button type="button" class="button red side">DOWNLOAD</button><button type="button" class="button yellow side">DOWNLOAD</button><button type="button" class="button green side">DOWNLOAD</button><button type="button" class="button blue side">DOWNLOAD</button><button type="button" class="button gray tags">SIGN UP</button><button type="button" class="button black tags">SIGN UP</button><button type="button" class="button red tags">SIGN UP</button><button type="button" class="button yellow tags">SIGN UP</button><button type="button" class="button green tags">SIGN UP</button><button type="button" class="button blue tags">SIGN UP</button><button type="button" class="button gray rarrow">LEARN MORE</button><button type="button" class="button black rarrow">LEARN MORE</button><button type="button" class="button red rarrow">LEARN MORE</button><button type="button" class="button yellow rarrow">LEARN MORE</button><button type="button" class="button green rarrow">LEARN MORE</button><button type="button" class="button blue rarrow">LEARN MORE</button><button type="button" class="button gray larrow">GO BACK</button><button type="button" class="button black larrow">GO BACK</button><button type="button" class="button red larrow">GO BACK</button><button type="button" class="button yellow larrow">GO BACK</button><button type="button" class="button green larrow">GO BACK</button><button type="button" class="button blue larrow">GO BACK</button>
</div></section>
</div>
</body>
</html>

3.button 种类

"Button"可以指多种不同类型的按钮，以下是其中的一些：

  1. 普通按钮（Normal Button）：最基本的按钮类型，当用户点击按钮时会触发一个事件。
  2. 切换按钮（Toggle Button）：在按下按钮时，按钮会保持按下状态，再次按下时会取消选中状态。
  3. 单选按钮（Radio Button）：用于在一组选项中选择一个选项，同时只能选中一个选项。
  4. 复选框（Checkbox）：用于在一组选项中选择多个选项，可以同时选中多个选项。
  5. 悬停按钮（Hover Button）：当用户将鼠标悬停在按钮上时，按钮的外观会发生变化。
  6. 图像按钮（Image Button）：使用图片或图标作为按钮的外观。
  7. 开关按钮（Switch Button）：用于切换一个状态，比如打开或关闭一个选项。
  8. 下拉按钮（Dropdown Button）：当用户点击按钮时，会弹出一个下拉菜单，用户可以从中选择一个选项。

4.button 的添加

以下是一些 HTML 中设置按钮样式的常用方法：

1.使用 CSS 样式表：可以通过 CSS 样式表来设置按钮的外观，例如设置按钮的背景色、字体颜色、边框等。

<style>button {background-color: #4caf50;border: none;color: white;padding: 10px 20px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;}
</style>

2.使用内联样式：可以在按钮标签中使用 style 属性来设置按钮的样式。

<button style="background-color: #4CAF50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;">Click me
</button>

3.使用类名：可以为按钮设置一个类名，然后在 CSS 样式表中设置该类名的样式。

<style>  .my-button {background-color: #4CAF50;border: none;color: white;padding: 10px 20px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;
} </style>
<button class="my-button">Click me</button>

觉得有用的话点个赞 👍🏻 呗。

❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍

🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙

img


http://chatgpt.dhexx.cn/article/gbEdT5Cf.shtml

相关文章

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

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

前言一 按钮在前端开发中往往是一个必不可少的元素，也有许多精美好看的样式资源供开发者直接使用。但博主认为，对于初学者而言，总是去cv别人做好的，而不理解其中的原理，是很不好的。 本人作为一名计科的学生，在大二也选修了校内的前端基础教程的课，但由于课时较短，老师…
阅读更多...
几个实用又好看的纯css 按钮样式

几个实用又好看的纯css 按钮样式

分享几个实用又好看的纯css 按钮样式 1.带波纹效果的按钮 html部分: <button class"niceButton2">click</button>css部分&#xff1a; .niceButton2{position: relative;background-color: rgb(32, 93, 224);border: none;font-size: 28px;color: #f…
阅读更多...
.apk文件的MIME类型

.apk文件的MIME类型

.apk文件的MIME类型 IIS7中下载apk文件会报404错误。 找到&#xff1a;IIS目录&#xff0c;MIME类型 添加.apk文件的MIME类型。 文件扩展名&#xff1a;.apk MIME类型&#xff1a;application/vnd.android.package-archive
阅读更多...
android apk编译打包过程

android apk编译打包过程

Android安装包的后缀都是.apk&#xff0c; apk是Android Package的缩写。 解压apk文件后包含AndroidManifest.xml、assets目录、classes.dex(还可能有 classes2.dex,classes3.dex...classesN.dex)、lib目录、META-INF目录、res目录和resources.arsc。 AndroidManifest.xml对应源…
阅读更多...
Android APK打包流程

Android APK打包流程

目录 一、概述二、打包流程1、打包资源文件&#xff0c;生成R.java文件2、处理aidl文件&#xff0c;生成相应的Java文件3、编译项目源代码&#xff0c;生成class文件4、转换所有的class文件&#xff0c;生成classes.dex文件5、打包生成APK文件6、对APK文件进行签名7、对签名后的…
阅读更多...
第四章 常见 Android 文件格式（一）（库文件、APK）

第四章 常见 Android 文件格式（一）（库文件、APK）

文章目录 库文件jar 包aar 包手动编写一个 aar 库APKAPK 文件结构APK 文件的生成流程APK 的安装流程通过系统程序安装（开机时安装）通过 Android 市场安装通过 adb 命令安装手机自带安装（通过 SD 卡里的 APK 文件安装）通过分析 packageinstaller.apk 的实现步骤了解 APK 的安…
阅读更多...
android apk包解压缩,Android 解压APK文件

android apk包解压缩,Android 解压APK文件

最近一个项目里需要得到Android已安装程序的签名文件(CERT.RSA)的SHA1值&#xff0c;所以就调研解压APK文件。 通过包名来得到已安装程序在系统的安装包路径。 private static String getApkPath(String pkgName) { PackageManager pm mContext.getPackageManager(); Applicat…
阅读更多...
Android中APK打包流程

Android中APK打包流程

aapt: android application package tool,SDK (Android打包流程图) #Android打包流程 1.通过aapt工具将 资源文件(res)、清单文件(AndroidManifest.xml)生成对应的R.java文件 * 在项目的根目录下新建 gen目录&#xff0c;并且依次在gen目录下新建清单文件总包名对应的文件目录 …
阅读更多...
android打包文件

android打包文件

直接把debug版本安装到真机会出现问题&#xff0c;和模拟器显示上的有点不一致。。亲身试验 接下来综合总结一下我看到其他博主们的经验 为什么要打包&#xff1a; apk文件就是一个包&#xff0c;打包就是要生成apk文件&#xff0c;有了apk别人才能安装使用。打包分debug版和re…
阅读更多...
如何打开Android 打包文件 .apk 文件

如何打开Android 打包文件 .apk 文件

在学习Android开发的过程中&#xff0c;常常想知道一些界面设计优良的应用是如何设计的。Android应用最后发布是以 .apk 文件提供的。那么如何在PC上打开这个 .apk文件呢&#xff1f; .apk 文件实际就是.zip 文件&#xff0c;可以使用WinZip ,WinRar 等来解压&#xff0c;一个简…
阅读更多...
APK文件详解 + 打包流程

APK文件详解 + 打包流程

记录个人学习历程&#xff0c;毫无技术可言 前言 要学习Android必然需要了解apk的目录结构以及打包流程&#xff0c;还有各种文件详解 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、APK文件详解 本质就是一个压缩包&#xff0c;可以直接进行解压…
阅读更多...
Android 打包流程之aapt打包资源文件

Android 打包流程之aapt打包资源文件

上一篇&#xff1a;Android打包流程之资源管理 Android应用最终是以apk的形式放在手机上安装并运行的&#xff0c;而负责将资源文件和代码进行打包的工具就叫appt&#xff0c;全称Android Asset Packaging Tool&#xff0c;翻译过来就是Android资源打包工具&#xff0c;是Andro…
阅读更多...
Android文件格式

Android文件格式

在Android的priv-app目录下发现有oat类型的文件夹 什么是oat&#xff1f; It’s Of Ahead Time, a silly reordering of Ahead Of Time. We went with that because then we say that process of converting .dex files to .oat files would be called quakerizing and that wo…
阅读更多...
Android项目打包生成apk文件

Android项目打包生成apk文件

Android开发打包生成APK文件 打包apk文件分为两种 无需密钥的apk有密钥的apk(常规) 他们的区别只是就是安全问题。 1.没有密钥的apk 点击之后会自动生成没有密钥的APK。 在编辑器的右下角会出现该弹窗&#xff0c;点击location会帮你找到该文件 2.有密钥的APK 1.找到bui…
阅读更多...
Java利用mpxj解析mpp格式文件

Java利用mpxj解析mpp格式文件

转载请注明来源&#xff1a;http://blog.csdn.net/loongshawn/article/details/51038051 《Java利用mpxj解析mpp格式文件》《SpringBoot添加Email发送功能》《SpringBoot配置log4j输出日志》《SpringBoot定时任务说明》《SpringBoot接口服务处理Whitelabel Error Page》《构建…
阅读更多...
java解析mpp文件（包含层级关系）

java解析mpp文件（包含层级关系）

我用的是递归循环的&#xff0c;不限制有多少子级关系都可以拿到 首先引入解析mpp所需依赖 <dependency><groupId>net.sf.mpxj</groupId><artifactId>mpxj</artifactId><version>7.1.0</version></dependency>解析所用实体类…
阅读更多...
Date转换年月日

Date转换年月日

timebasic.js //时间戳转年月日 export function format(shijianchuo) {//shijianchuo是整数&#xff0c;否则要parseInt转换var time new Date(shijianchuo);var y time.getFullYear();var m time.getMonth() 1;m m < 10 ? "0" m : m;var d time.getDate…
阅读更多...
C# 接口中DateTime类型字段返回年月日格式，去掉时分秒的数据

C# 接口中DateTime类型字段返回年月日格式，去掉时分秒的数据

背景 在我们平时写接口的时候&#xff0c;避免不了这样一个问题&#xff0c;数据库中存的字段类型为datetime,代码中对应的实体类也是DateTime类型的字段&#xff0c;于是在读取数据库内容之后返回的数据也是DateTime类型的值&#xff0c;比如2022-10-24 18:34:56.110&#xf…
阅读更多...
vue3-用dayjs将时间戳转为年月日格式

vue3-用dayjs将时间戳转为年月日格式

已知&#xff0c;格式化时间&#xff1a;dayjs(cellValue).format(YYYY-MM-DD) 用法&#xff1a; import dayjs from dayjs;dayjs(时间戳).format(YYYY-MM-DD HH:mm:ss); 如&#xff0c;在get请求中使用&#xff1a; service.get(/trace/sourceSearchInput.value).then(res …
阅读更多...
Java但中获取时间将时间转换成字符串格式（年月日格式）

Java但中获取时间将时间转换成字符串格式（年月日格式）

一:直接上马拿走&#xff1a; package cn.wyj.one;import java.text.DateFormat; import java.text.SimpleDateFormat; import java.util.Date;/*** 测试时间对象和字符串之间的相互转化* DateFormat抽象类和SimpleDateFormat实现类的使用* author 86155**/public class Demo2…
阅读更多...
推荐文章

Copyright @ 2022~2023