CSS创建FaceBook风格的按钮

2020-01-27 14:18:56

字体：大中小

来源：转载

供稿：网友

一款使用纯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>

上一篇：CSS轻易实现鼠标移上Hover时的显示隐藏效果

下一篇：CSS3立体开关，网页开关超酷效果