3、按钮 - HTML5&CSS3.0基础部分-xyphf
2017-07-04 12:02
387 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>按钮</title> <style> #div1{width:200px;height:50px;line-height:50px;text-align:center; border:1px solid #000;font-size: 30px;border-radius:10px; box-shadow: inset 0 0 10px green,0 10px #000; transition:0.3s all ease; position: relative;left:0;top: 0; } #div1:hover{box-shadow:inset 0 0 20px green,0 10px #000;} #div1:active{box-shadow:inset 0 0 20px green,0 0 #000;top: 10px;} </style> </head> <body> <div id="div1">按钮</div> </body> </html>
相关文章推荐
- 3、H5标签 视频video - HTML5&CSS3.0基础部分-xyphf
- 5、获取元素 - HTML5&CSS3.0基础部分-xyphf
- [置顶] HTML5&CSS3.0基础部分目录-xyphf
- 1、H5标签 音效audio - HTML5&CSS3.0基础部分-xyphf
- 5、透明度渐变 - HTML5&CSS3.0基础部分-xyphf
- 4.运动 transition:时间 属性 运动形式 延迟时间 - HTML5&CSS3.0基础部分-xyphf
- 6、自定义属性 - HTML5&CSS3.0基础部分-xyphf
- 10、选择器 - HTML5&CSS3.0基础部分-xyphf
- 7、模糊 - HTML5&CSS3.0基础部分-xyphf
- 1.圆角 - HTML5&CSS3.0基础部分-xyphf
- 4、H5表单控件 - HTML5&CSS3.0基础部分-xyphf
- 9、class获取、添加删除状态切换 - HTML5&CSS3.0基础部分-xyphf
- 13、层次选择器 - HTML5&CSS3.0基础部分-xyphf
- 2、阴影 - HTML5&CSS3.0基础部分-xyphf
- 2、百分比 - HTML5&CSS3.0基础部分-xyphf
- 8、localstorage的应用 - HTML5&CSS3.0基础部分-xyphf
- 14.before_after - HTML5&CSS3.0基础部分-xyphf
- 2、多媒体标签 embed - HTML5&CSS3.0基础部分-xyphf
- 7.数组转字符串 - HTML5&CSS3.0基础部分-xyphf
- 12、其他伪类选择器 - HTML5&CSS3.0基础部分-xyphf