您的位置:首页 > Web前端 > CSS

纯CSS buttons

2017-03-31 10:20 267 查看
效果:Demo

HTML:

<h1>Pure Css Button</h1>

<div class="main">
<div class="sub-main">
<button class="button-one">Tap Me</button>
</div>
<div class="sub-main">
<button class="button-two"><span>Hover Me</span></button>
</div>
<div class="sub-main">
<button class="button-three">Click Me</button>
</div>
</div>


CSS:

*{margin: 0px; padding: 0px}

body{
background:#2c3e50;
font-family: 'Open Sans', sans-serif;
}

h1, button{
color:#fff;
text-align: center;
padding: 20px;
}

.main{
width: 100%;
}

.sub-main{
width: 30%;
margin:22px;
float: left;
}

.button-one, .button-two, .button-three{
text-align: center;
cursor: pointer;
font-size:24px;
margin: 0 0 0 100px;
}

/*Button One*/
.button-one {
padding:20px 60px;
outline: none;
background-color: #27ae60;
border: none;
border-radius:5px;
box-shadow: 0 9px #95a5a6;
}

.button-one:hover{
background-color: #2ecc71;
}

.button-one:active {
background-color: #2ecc71;
box-shadow: 0 5px #95a5a6;
transform: translateY(4px);
}

/*Button Two*/
.button-two {
border-radius: 4px;
background-color:#d35400;
border: none;
padding: 20px;
width: 200px;
transition: all 0.5s;
}

.button-two span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.button-two span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}

.button-two:hover span {
padding-right: 25px;
}

.button-two:hover span:after {
opacity: 1;
right: 0;
}

/*Button Three*/
.button-three {
position: relative;
background-color: #f39c12;
border: none;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
}

.button-three:hover{
background:#fff;
box-shadow:0px 2px 10px 5px #97B1BF;
color:#000;
}

.button-three:after {
content: "";
background: #f1c40f;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}

.button-three:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}


前端交流QQ群:310191160
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  css button 前端 按钮