简单的按钮样式

来源:互联网 发布:界面设计用什么软件 编辑:程序博客网 时间:2024/05/17 03:48
/* 按钮样式适用于input, button, a, span, div*/.s_button:visited,.s_button {  padding:2px 6px;   margin:0;   border:1px solid #ccc;  background:url(../img/btns.png) repeat-x 0 0;  line-height:18px;  height:18px;  font-size:14px;  display: inline-block;  vertical-align: top;  text-decoration: none;  cursor: pointer;  color:#000;  *overflow: visible;  font-family:'Arial';  -moz-box-sizing:content-box;  box-sizing:content-box;  border-radius: 2px;}.s_button:hover {  text-decoration: none;  color:#000;  border:1px solid #aaa;  background:url(../img/btns.png) repeat-x 0 -100px; }.s_button:active {  border:1px solid #888;  background:url(../img/btns.png) repeat-x 0 -200px;  }input.s_button,button.s_button {  +height:24px;  _line-height:19px;  *padding:0 6px;}div.s_button {  *display: inline;  *margin-right:4px; /* 模拟inline-block的间隙 */}

<button class="s_button" type="button">提交</button><input type="submit" class="s_button" value="提交" /><a href="#" class="s_button">提交</a><span class="s_button">提交</span><div class="s_button">提交</div><button class="s_button" type="button">submit</button><input type="submit" class="s_button" value="submit" /><a href="#" class="s_button">submit</a><span class="s_button">submit</span><div class="s_button">submit</div>