代码:
<meta charset="utf-8"/>
<style>
[type="button"]{margin:3px;}
.button-style1{height: 34px;width: 90px;border:none;background-color:#5bc0de;font-size:14px;color:#FFFFFF;border-radius:4px;cursor:pointer;outline:none;}
.button-style1:hover{background-color:#269abc;transition:background-color 0.4s;}
.button-style1:active{background-color:#31b0d5;position:relative;top:1px;}
.button-style2{height: 34px;width: 90px;border:none;background-color:#337ab7;font-size:14px;color:#FFFFFF;border-radius:4px;cursor:pointer;outline:none;}
.button-style2:hover{background-color:#286090;transition:background-color 0.4s;}
.button-style2:active{background-color:#215178;position:relative;top:1px}
.button-style3{height: 34px;width: 90px;border:none;background-color:#449d44;font-size:14px;color:#FFFFFF;border-radius:4px;cursor:pointer;outline:none;}
.button-style3:hover{background-color:#398439;transition:background-color 0.4s;}
.button-style3:active{background-color:#357935;position:relative;top:1px}
.button-style4{height: 34px;width: 90px;border:none;background-color:#f0ad4e;font-size:14px;color:#FFFFFF;border-radius:4px;cursor:pointer;outline:none;}
.button-style4:hover{background-color:#ec971f;transition:background-color 0.4s;}
.button-style4:active{background-color:#e48c14;position:relative;top:1px}
.button-style5{height: 34px;width: 90px;border:none;background-color:#d9534f;font-size:14px;color:#FFFFFF;border-radius:4px;cursor:pointer;outline:none;}
.button-style5:hover{background-color:#c9302c;transition:background-color 0.4s;}
.button-style5:active{background-color:#b62b27;position:relative;top:1px}
.button-style6{height: 34px;width: 90px;border:1px solid #ccc;background-color:#fff;font-size:14px;color:#333;border-radius:4px;cursor:pointer;outline:none;}
.button-style6:hover{background-color:#d4d4d4;transition:background-color 0.4s;}
.button-style6:active{background-color:#e6e6e6;position:relative;top:1px}
.button-style7{height: 34px;width: 90px;color: #8c96a0;border: 1px solid #dce1e6;box-shadow: 0 1px 2px #fff inset, 0 -1px 0 #a8abae inset;background:-webkit-linear-gradient(top,#f2f3f7,#e4e8ec);outline:none;cursor:pointer;border-radius:4px}
.button-style7:hover{background: -webkit-linear-gradient(top,#fefefe,#ebeced);}
.button-style7:active{box-shadow: 0 1px 3px #a8abae inset, 0 3px 0 #fff;background: -webkit-linear-gradient(top,#e4e8ec,#e4e8ec);position:relative;top:1px}
.button-style8{height: 34px;width: 90px;color:#FFFFFF;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);outline:none;cursor:pointer;border-radius:4px}
.button-style8:hover{background:-webkit-linear-gradient(top,#818181,#575757);}
.button-style8:active{ box-shadow: 0 1px 3px #111 inset, 0 3px 0 #fff;background: -webkit-linear-gradient(top,#424242,#575757);position:relative;top:1px}
.button-style9{height: 34px;width: 90px;color:#FFFFFF;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);outline:none;cursor:pointer;border-radius:4px}
.button-style9:hover{background:-webkit-linear-gradient(top,#eb6f6f,#c83c3c);}
.button-style9:active{box-shadow:0 1px 3px #5b0505 inset, 0 3px 0 #fff;;background:-webkit-linear-gradient(top,#b11a1a,#bf2626);position:relative;top:1px}
.button-style10{height: 34px;width: 90px;color:#FFFFFF;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);outline:none;cursor:pointer;border-radius:4px}
.button-style10:hover{background:-webkit-linear-gradient(top,#ffd859,#e3bb38);}
.button-style10:active{box-shadow:0 1px 3px #816b1f inset, 0 3px 0 #fff;background:-webkit-linear-gradient(top,#d3a203,#dba907);position:relative;top:1px}
.button-style11{height: 34px;width: 90px;color:#FFFFFF;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);outline:none;cursor:pointer;border-radius:4px}
.button-style11:hover{background:-webkit-linear-gradient(top,#aaebb9,#82d392);}
.button-style11:active{box-shadow:0 1px 3px #4d7254 inset, 0 3px 0 #fff;background:-webkit-linear-gradient(top,#5eac6e,#72b37e);position:relative;top:1px}
.button-style12{height: 34px;width: 90px;color:#FFFFFF;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);outline:none;cursor:pointer;border-radius:4px}
.button-style12:hover{background:-webkit-linear-gradient(top,#70bfef,#4097ce);}
.button-style12:active{box-shadow:0 1px 3px #114566 inset, 0 3px 0 #fff;background:-webkit-linear-gradient(top,#1a71a8,#1976b1);position:relative;top:1px}
.button-style13{height:34px;width:90px;color:#FFFFFF;background-color:#39bee1;box-shadow:inset 0px 2px 0px 0px #6FE1EF;outline:none;cursor:pointer;-webkit-border-radius:50px;border:4px solid #d2d7dd;}
.button-style13:hover{background: linear-gradient(to bottom, rgba(71,204,237,1) 0%, rgba(105,213,241,1) 100%);}
.button-style13:active{background:#03507e;box-shadow:inset 0px 2px 0px 0px #03507e}
.button-style14{height:34px;width:90px;font-size:18px;font-weight:700;color:#FFFFFF;background-color:#DB5705;border-radius:8px;box-shadow:0px 5px 0px #DB1F05,0px 9px 15px #3D3D3D;border:none;outline:none;cursor:pointer;}
.button-style14:hover{background-color:#f56005}
.button-style14:active{position: relative;top: 6px;box-shadow:0px 3px 0px #DB1F05, 0px 3px 6px #3D3D3D;}
.button-style15{height:34px;width:90px;background-color:#1B9AF7;color:#FFF;outline:none;border:none;cursor:pointer;border-radius: 4px;box-shadow: 0 7px 0 #0880d7;}
.button-style15:hover{background-color:#39a8f9}
.button-style15:active{background-color: #2798eb;border-color: #2798eb;;position: relative;top: 6px;box-shadow: 0 2px 0 #0662a6}
.button-style16{height:34px;width:90px;background-color: #A5DE37;color:#FFF;outline:none;border:none;cursor:pointer;border-radius: 200px;;box-shadow:0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3);}
.button-style16:hover{background-color: #b9e563;}
.button-style16:active{background-color: #a1d243;position:relative;top: 6px;box-shadow: 0 2px 0 #6b9619, 0 3px 3px rgba(0, 0, 0, 0.2);}
.button-style17{height:45px;width:150px;color:#FFF;font-size:16px;font-weight:700;background-image:linear-gradient(to right,#25aae1,#4481eb,#04befe,#3f86ed);background-size:300% 100%;border-radius:200px;outline:none;border:none;cursor:pointer;}
.button-style17:hover{background-position: 100% 0;transition: all .4s ease-in-out;}
.button-style18{height:45px;width:150px;font-size:16px;border-radius:3px;background-color:#FFFFFF;outline:none;cursor:pointer;border:1px solid #206be7;}
.button-style18:hover{background-color:#206be7;color:#FFFFFF;transition:background 0.4s;}
.button-style18:active{background-color:#165acb}
</style>
<h3>平面</h3>
<input type="button" class="button-style1" value="按钮1">
<input type="button" class="button-style2" value="按钮2">
<input type="button" class="button-style3" value="按钮3">
<input type="button" class="button-style4" value="按钮4">
<input type="button" class="button-style5" value="按钮5">
<input type="button" class="button-style6" value="按钮6">
<h3>立体</h3>
<input type="button" class="button-style7" value="按钮1">
<input type="button" class="button-style8" value="按钮2">
<input type="button" class="button-style9" value="按钮3">
<input type="button" class="button-style10" value="按钮4">
<input type="button" class="button-style11" value="按钮5">
<input type="button" class="button-style12" value="按钮6">
<h3>其他</h3>
<input type="button" class="button-style13" value="按钮1">
<input type="button" class="button-style14" value="点赞">
<input type="button" class="button-style15" value="按钮3">
<input type="button" class="button-style16" value="按钮4">
<input type="button" class="button-style17" value="按钮5">
<input type="button" class="button-style18" value="按钮6">相关推荐
html表格table的使用,以及表格的css样式通用代码,拿来即用<style> table{border-spacing:0px;border-collapse: collapse ;} td,th{border:1px solid
原生js,原生Javascript写的开关按钮<style> td,table{border:1px solid #323841;} </style> <form method="get" act
输入法管理器（IMM）函数大全（Windows cE 5.0）imm好像要被弃用了 还是研究TSF输入法 吧 ,虽然没啥鸟用了 但是还是搬运一下下吧EnumRegisterWordProc此函数是与一起使用的应用程序定义的回调函数ImmEnumRegisterW