CSS创建FaceBook风格的按钮
一款使用纯CSS代码实现的仿FaceBook网站风格的按钮效果,没有使用任何的图片,兼容全系列浏览器,如果对两款按钮的颜色不满意的话,那就自己重新设置你喜欢的颜色,不过要注意按钮边角各颜色值的处理,这一点也是挺关键的。
代码如下:
<html> <head> <title>FaceBook风格的菜单</title> <style> body{ font-family: "lucida grande", tahoma, verdana, arial, sans-serif; font-weight:bold; font-size:12px; margin:100px; } .button_outside_border_green{ width:100px; border:solid #3b6e22 1px; border-bottom:solid #2c5115 1px; cursor:pointer; } .button_inside_border_green{ padding:6px 0 6px 0; background-color:#68a64c; border-top:solid #98c286 1px; text-align:center; color:#ffffff; } div.button_inside_border_green:active{ background-color:#609946; } .button_outside_border_blue{ width:100px; border:solid #29447e 1px; border-bottom:solid #1a356e 1px; cursor:pointer; } .button_inside_border_blue{ padding:6px 0 6px 0; background-color:#5c75a9; border-top:solid #8a9cc2 1px; text-align:center; color:#ffffff; } div.button_inside_border_blue:active{ background-color:#4f6aa3; } </style> </head> <body> <h1>FaceBook style buttons</h1> <div class="button_outside_border_green"> <div class="button_inside_border_green">Sign Up</div> </div> <br /> <div class="button_outside_border_blue"> <div class="button_inside_border_blue">Login</div> </div> </body> </html>
效果如图:
一、推荐使用迅雷或快车等多线程下载软件下载本站资源。
二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。
三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!
四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.
五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。
六、如需转载本站资源,请注明转载来自并附带链接
七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com
大家评论
站长推荐
点击排行
- 1CSS控制文字在Div最底部显示
- 2Thinkphp5如何配置IP+端口访问项目模块
- 3elementUI el-dialog弹框居中
- 4教你如何搭建及优化站点
- 5国内互联网视频行业运营分析
- 6service mysql start出错,mysql不能启动,解决mysql: unrecognized service错误
- 7CSS实现悬浮顶部的Div工具栏
- 8记一次Thinkphp5.1框架mysql数据库崩溃(SQLSTATE [08004] Too many connections)
- 9连接SQL Server数据库提示:Login failed for user 'sa'错误的解决方案
- 10Thinkphp3.2在centos7上设置计划任务的方法