纯CSS buttons
2017-03-31 10:20
267 查看
效果:Demo
HTML:
CSS:
前端交流QQ群:310191160
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 round buttons
- css中Buttons样式最佳设置
- Creating CSS Buttons
- Pure CSS Buttons – Good Button Style and No Images
- Styling FX Buttons with CSS
- pure.css 源码之 buttons 篇
- An Introduction to the Basics of Modern CSS Buttons
- How to make sexy buttons with CSS
- How to make sexy buttons with CSS
- buttons.css——可以与bootstrap融合的按钮样式库
- buttons.css——可以与bootstrap融合的按钮样式库
- Bootstrap 基础CSS - 按钮(Buttons)
- 实用网页技术(javascript+CSS)
- div+css - XHTML标准 - 5.2.4. List Module列表模块
- css的操作之addClass和removeClass
- css布局经验一
- 制作1px表格边框的十种方法(html和css)
- DIV+CSS基础教程
- cellpadding=0 cellspacing=0的css替代写法
- css仿word首字下沉效果示例