div+css实现立体按钮突出点击推入效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现立体按钮突出点击推入效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css"> <style> * { padding:0; margin: 0; } body { text-align: center; font-family: "Roboto"; color: #fff; letter-spacing:1px; } #type3 { background: #ffa726; padding-bottom: 60px; position: relative; padding-top: 60px } h1 { font-size: 50px; padding: 30px 0; } h3 { padding:30px 0 0 0; } h3 a { margin-left:5px; text-decoration: none; color: #fff; font-weight: light; border-bottom: 1px dotted; padding: 0 2px 3px 2px; } h3 a:hover { border-bottom:1px solid; } .btn { background: #0183e8; font-size: 20px; color: white; border-radius: 7px; text-shadow: 1px 1px 0px #000; box-shadow: 0 7px 0px #083766; display: inline-block; min-width:10rem; transition: all .2s; position: relative; padding: 10px 2rem; position: relative; top: 0; cursor: pointer; margin:20px 20.........完整代码请登录后点击上方下载按钮下载查看
网友评论0