css立体按钮效果
分类:实例代码
本代码实例实现了立体按钮效果。
并不是使用css3实现,而是利用边框造成视觉上的错觉而实现。
更多css3按钮效果可以参阅CSS3立体按钮效果一章节。
代码实例:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> .navigation { text-align: center; font-family: Arial,Helvetica,sans-serif; font-size: 16px; line-height: 24px; } .navigation ul { list-style-type: none; padding: 0; margin: 0; padding-top: 4px; } .navigation li { display: inline-block; } .navigation a:link, .navigation a:visited { margin-left: 2px; padding: 3px 10px 2px 10px; color: #A62020; background-color: #FCE6EA; text-decoration: none; border-top: 1px solid #fff; border-left: 1px solid #fff; border-bottom: 1px solid #717171; border-right: 1px solid #717171; } .navigation a:hover { border-top: 1px solid #717171; border-left: 1px solid #717171; border-bottom: 1px solid #fff; border-right: 1px solid #fff; } </style> </head> <body> <div class="navigation"> <ul> <li><a href="">前端教程网一</a></li> <li><a href="">前端教程网二</a></li> <li><a href="">前端教程网三</a></li> <li><a href="">前端教程网四</a></li> </ul> </div> </body> </html>