网站div css按钮效果设计

　　网站用div css重新设计好之后，速度和美观度都会有提高，但一定要做好兼容性测试。
　　用div设计按钮时，用于效果更漂亮，且简单。网站div css,即便你不在全站用，局部效果也不错。

　　现在讲解按钮效果中的一种方法。如果灵活运用的话，div　css网站设计的按钮，让你的站点增彩不少。

　　先看从www.cunbuluo.com (村部落)里截取的一段样式表：

　　#prolist{ letter-spacing:2px; font-size:14px; font-weight:bold}
　　#prolist ul{ margin:0px; padding:0px}
　　#prolist li{ height:35px; line-height:35px; background:url(images/pro_bg.gif) center no-repeat; margin:4px 0px 4px 0px}
　　#prolist li a{ display:block; width:165px}
　　#prolist li a:link {color: #dd0000; text-decoration: none;}
　　#prolist li a:visited { text-decoration: none;color: #dd0000;}
　　#prolist li a:hover {text-decoration: underline;color: #ff0000; background:url(images/pro_bg2.gif) center no-repeat;}
　　#prolist li a:active { text-decoration: none;color: #dd0000;}

　　这里要注意的是div css元素的每一级的关系。再注意的就是红色部分，它是使实现按钮效果的的主要样式表。其中#prolist li a{ display:block; width:165px}中display:block一定要设置，不然话，切换背景的效果不回明显。这样，用div css设计按钮背景的切换效果。

　　另外也可以改里边的hover样式为#prolist li a:hover {text-decoration: underline;color: #ff0000; background:url(images/pro_bg2.gif) center no-repeat; position:relative;left:1px;top:1px}，这样就加上了字符下沉的效果。背景再设置好，整个按钮都会有下滑感。