简单的按钮样式
来源:互联网 发布:界面设计用什么软件 编辑:程序博客网 时间: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>