css 如何实现一个立体按钮呢?


摘要:
下文讲述使用css脚本绘制一个立体按钮的效果分享,如下所示:


实现思路:
借助css边框的阴影,使按钮看起来是一个立体的效果

例:
使用css编写一个立体按钮




<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
--css实现立体效果按钮分享
</title>
<style type="text/css">
.btn {
  text-align: center;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 24px;
  line-height: 34px;
  
}
.btn ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  padding-top: 8px;
  
}
.btn li {
  display: inline-block;
  height:158px;
  
}
.btn a:link, .btn a:visited {
  margin-left: 4px;
  display: inline-block;
  height:50px;
  padding: 13px 10px 2px 10px;
  color: white;
  background-color: blue;
  text-decoration: none;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #717171;
  border-right: 1px solid #717171;
}
.btn 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="btn">
  <ul>
    <li><a href="#">猫猫教程-按钮1</a></li>
    <li><a href="#">猫猫教程-按钮2</a></li>
    <li><a href="#">猫猫教程-按钮3</a></li>
    <li><a href="#">猫猫教程-按钮4</a></li>
  </ul>
</div>
</body>
</html>
css 立体按钮效果分享

css 立体按钮效果分享