<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #eaedf1;
font-family: 'Lato', sans-serif;
}
.header {
background: white;
padding: 30px;
text-align: center;
}
.header h1 {
font-weight: 300;
display: inline;
}
h2 {
color: #89867e;
text-align: center;
font-weight: 300;
}
.color {
width: 350px;
margin: 0 auto;
}
.color li {
margin: 0 15px 0 0;
width: 30px;
height: 30px;
display: inline-block;
border-radius: 100%;
}
.color .red {background: #fa5a5a;}
.color .yellow {background: #f0d264;}
.color .green {background: #82c8a0;}
.color .cyan {background: #7fccde;}
.color .blue {background: #6698cb;}
.color .purple {background: #cb99c5;}
.content,
.content-gradient,
.content-3d {
margin: 40px auto;
}
.content {
width: 80%;
max-width: 700px;
}
.content-3d {
width: 50%;
max-width: 300px;
}
pre {
width: 100%;
padding: 30px;
background-color: rgba(0, 0, 0, 0.72);
color: #f8f8f2;
border-radius: 0 0 4px 4px;
margin-top: 20px;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
pre .bt {color: #f8f8f2;} /* <> */
pre .anc {color: #f92672;} /* anchor tag */
pre .att {color: #a6a926;} /* attribute */
pre .val {color: #e6db74;} /* value */
.btn-container, .container {
background-color: white;
border-radius: 4px;
text-align: center;
margin-bottom: 40px;
}
.container h2 {
padding-top: 30px;
font-weight: 300;
}
.btn, .btn-two {
margin: 9px;
}
.btn-gradient {
margin: 5px;
}
a[class*="btn"] {text-decoration: none;}
input[class*="btn"],
button[class*="btn"] {border: 0;}
/* Here you can change the button sizes */
.btn.large,
.btn-two.large,
.btn-effect.large {
padding: 20px 40px;
font-size: 22px;
}
.btn.small,
.btn-two.small,
.btn-gradient.small,
.btn-effect.small {
padding: 8px 18px;
font-size: 14px;
}
.btn.mini,
.btn-two.mini,
.btn-gradient.mini,
.btn-effect.mini {
padding: 4px 12px;
font-size: 12px;
}
.btn.block,
.btn-two.block,
.btn-gradient.block,
.btn-effect.block {
display: block;
width: 60%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.btn-gradient.large {
padding: 15px 45px;
font-size: 22px;
}
/* Colors for .btn and .btn-two */
.btn.blue, .btn-two.blue {background-color: #7fb1bf;}
.btn.green, .btn-two.green {background-color: #9abf7f;}
.btn.red, .btn-two.red {background-color: #fa5a5a;}
.btn.purple, .btn-two.purple {background-color: #cb99c5;}
.btn.cyan, .btn-two.cyan {background-color: #7fccde;}
.btn.yellow, .btn-two.yellow {background-color: #f0d264;}
.rounded {
border-radius: 10px;
}
/* default button style */
.btn {
position: relative;
border: 0;
padding: 15px 25px;
display: inline-block;
text-align: center;
color: white;
}
.btn:active {
top: 4px;
}
/* color classes for .btn */
.btn.blue {box-shadow: 0px 4px #74a3b0;}
.btn.blue:active {box-shadow: 0 0 #74a3b0; background-color: #709CA8;}
.btn.green {box-shadow: 0px 4px 0px #87a86f;}
.btn.green:active {box-shadow: 0 0 #87a86f; background-color: #87a86f;}
.btn.red {box-shadow:0px 4px 0px #E04342;}
.btn.red:active {box-shadow: 0 0 #ff4c4b; background-color: #ff4c4b;}
.btn.purple {box-shadow:0px 4px 0px #AD83A8;}
.btn.purple:active {box-shadow: 0 0 #BA8CB5; background-color: #BA8CB5;}
.btn.cyan {box-shadow:0px 4px 0px #73B9C9;}
.btn.cyan:active {box-shadow: 0 0 #73B9C9; background-color: #70B4C4;}
.btn.yellow {box-shadow:0px 4px 0px #D1B757;}
.btn.yellow:active {box-shadow: 0 0 #ff4c4b; background-color: #D6BB59;}
/* Button two - I have no creativity for names */
.btn-two {
color: white;
padding: 15px 25px;
display: inline-block;
border: 1px solid rgba(0,0,0,0.21);
border-bottom-color: rgba(0,0,0,0.34);
text-shadow:0 1px 0 rgba(0,0,0,0.15);
box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset,
0 2px 0 -1px rgba(0,0,0,0.13),
0 3px 0 -1px rgba(0,0,0,0.08),
0 3px 13px -1px rgba(0,0,0,0.21);
}
.btn-two:active {
top: 1px;
border-color: rgba(0,0,0,0.34) rgba(0,0,0,0.21) rgba(0,0,0,0.21);
box-shadow: 0 1px 0 rgba(255,255,255,0.89),0 1px rgba(0,0,0,0.05) inset;
position: relative;
}
/* 3D Button */
.btn-3d {
position: relative;
display: inline-block;
font-size: 22px;
padding: 20px 60px;
color: white;
margin: 20px 10px 10px;
border-radius: 6px;
text-align: center;
transition: top .01s linear;
text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.btn-3d.red:hover {background-color: #e74c3c;}
.btn-3d.blue:hover {background-color: #699DD1;}
.btn-3d.green:hover {background-color: #80C49D;}
.btn-3d.purple:hover {background-color: #D19ECB;}
.btn-3d.yellow:hover {background-color: #F0D264;}
.btn-3d.cyan:hover {background-color: #82D1E3;}
.btn-3d:active {
top: 9px;
}
/* 3D button colors */
.btn-3d.red {
background-color: #e74c3c;
box-shadow: 0 0 0 1px #c63702 inset,
0 0 0 2px rgba(255,255,255,0.15) inset,
0 8px 0 0 #C24032,
0 8px 0 1px rgba(0,0,0,0.4),
0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.red:active {
box-shadow: 0 0 0 1px #c63702 inset,
0 0 0 2px rgba(255,255,255,0.15) inset,
0 0 0 1px rgba(0,0,0,0.4);
}
.btn-3d.blue {
background-color: #6DA2D9;
box-shadow: 0 0 0 1px #6698cb inset,
0 0 0 2px rgba(255,255,255,0.15) inset,
0 8px 0 0 rgba(110, 164, 219, .7),
0 8px 0 1px rgba(0,0,0,.4),
0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.blue:active {
box-shadow: 0 0 0 1px #6191C2 inset,
0 0 0 2px rgba(255,255,255,0.15) inset,
0 0 0 1px rgba(0,0,0,0.4);
}
.btn-3d.green {
background-color: #82c8a0;
box-shadow: 0 0 0 1px #82c8a0 inset,
0 0 0 2px rgba(255,255,255,0.15) inset,
0 8px 0 0 rgba(126, 194, 155, .7),
0 8px 0 1px rgba(0,0,0,.4),
0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.green:active {
box-shadow: 0 0 0 1px #82c8a0 inset,
0 0 0 2px rgba(255,255,255,0.15) inset,
0 0 0 1px rgba(0,0,0,0.4);
}
.btn-3d.purple {
background-color: #cb99c5;
box-shadow: 0 0 0 1px #cb99c5 inset,
0 0 0 2px rgba(255,255,255,0.15) inset,
0 8px 0 0 rgba(189, 142, 183, .7),
0 8px 0 1px rgba(0,0,0,.4),
0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.purple:active {
box-shadow: 0 0 0 1px #cb99c5 inset,
0 0 0 2px rgba(255,255,255,0.15) inset,
0 0 0 1px rgba(0,0,0,0.4);
}
.btn-3d.cyan {
background-color: #7fccde;
box-shadow: 0 0 0 1px #7fccde inset,
0 0 0 2px rgba(255,255,255,0.15) inset,
0 8px 0 0 rgba(102, 164, 178, .6),
0 8px 0 1px rgba(0,0,0,.4),
0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.cyan:active {
box-shadow: 0 0 0 1px #7fccde inset,
0 0 0 2px rgba(255,255,255,0.15) inset,
0 0 0 1px rgba(0,0,0,0.4);
}
.btn-3d.yellow {
background-color: #F0D264;
box-shadow: 0 0 0 1px #F0D264 inset,
0 0 0 2px rgba(255,255,255,0.15) inset,
0 8px 0 0 rgba(196, 172, 83, .7),
0 8px 0 1px rgba(0,0,0,.4),
0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.yellow:active {
box-shadow: 0 0 0 1px #F0D264 inset,
0 0 0 2px rgba(255,255,255,0.15) inset,
0 0 0 1
【前端素材】模板-实用30多种好看的按钮素材.zip
版权申诉
140 浏览量
2024-04-04
18:35:52
上传
评论
收藏 168KB ZIP 举报
【前端素材】模板-实用30多种好看的按钮素材.zip （66个子文件） 
buttons 按钮立体动画 
按钮合集.htm 90KB 下载按钮.htm 13KB
hoverBtn2.html 4KB btns4.html 2KB 火焰按钮.html 4KB hoverBtn0.html 977B switch按钮们 拟物态按钮.html 1KB switch_tab_btn.html 1KB 立体开关按钮.htm 3KB indexTab.html 3KB abtn.html 12KB abeautiButton.html 4KB index1.htm 5KB xiongbtn.html 13KB index2.htm 13KB btns.html 2KB 一些css实现的图标.html 7KB 一些小按钮.html 26KB waveBtn.html 2KB mb.html 2KB 按钮带阴影.html 552B 奇奇怪怪形状的按钮.html 7KB 折角按钮.htm 2KB sbpk.html 3KB materialBtn.html 2KB btns9.html 2KB btns3.html 3KB 谷歌tab 3.自适应的svg.html 3KB 5.mask.html 2KB 1.clipath+伪元素.html 1KB 2.渐变.html 3KB 4.图片.html 1017B img 
img.jpg 16KB 渐变.jpg 35KB svg.jpg 15KB clip-path.jpg 43KB 单个.html 951B googleTab.html 2KB btns5.html 4KB 悬浮按钮 悬浮阴影展开.html 1KB index.html 4KB 边框圆角渐变+背景透明.htm 2KB btn11.html 1002B blogBtns.html 7KB btns7.html 1KB 水滴.html 2KB img 
button_bg.png 16KB arrow.png 15KB btns2.html 3KB btns8.html 3KB 按钮小点点背景.htm 4KB sbth.html 3KB codepenBtn.html 1KB index.html 2KB hover折角按钮.htm 1KB writing.html 3KB btns10.html 2KB trans_btn.html 3KB 按钮悬浮变形.htm 4KB hoverBtn1.html 990B 一些按钮们.html 18KB btns6.html 2KB btnhove02.html 4KB shadwing.html 2KB 按钮wave水波纹.htm 1KB hoverBtn.html 5KB资源评论
枫蜜柚子茶
- 粉丝: 6242
- 资源: 4607
