用CSS美化按钮(button)

演示地址:http://www.9demo.com/demo/css_button/css_button.htm

?

我们用 A 包含一个 SPAN 标签来实现此效果:

HTML:

<a class=”button” href=”#”><span>按钮文字</span></a>?
设置按钮样式:

CSS:

<style type=”text/css”>? a.button {???? background: transparent url(‘bg_button_a.gif’) no-repeat scroll top right;???? color: #444;???? display: block;???? float: left;???? font: normal 12px arial, sans-serif;???? height: 24px;???? margin-right: 6px;???? padding-right: 18px; /* sliding doors padding */???? text-decoration: none; }? a.button span {???? background: transparent url(‘bg_button_div.gif’) no-repeat;???? display: block;???? line-height: 14px;???? padding: 5px 0 5px 18px; }? </style>?
为按钮添加点击样式:

CSS:

<style type=”text/css”>? a.button:active {???? background-position: bottom right;???? color: #000;???? outline: none; /* hide dotted outline in Firefox */ }? a.button:active span {???? background-position: bottom left;???? padding: 6px 0 4px 18px; /* push text down 1px */ }? </style>?
由于 IE 下点击后不能还原到默认状态,因此,我们需要在标签里添加一段代码:

HTML: <a class=”button” href=”#” onclick=”this.blur(); return false;”><span>按钮文字</span></a>?
如果你需要用它提交表单(FORM),那么可以在 onclick 里面添加一个提交语句,如:document.forms[‘theForm’].submit();

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 用CSS美化按钮(button)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏