利用CSS3制作无背景图片特效按钮

作者:     目录:编程代码 & 网页设计     发表:2010年03月15日

随着CSS3标准的推广和普及,越来越多的浏览器开始支持CSS3标准,利用CSS3可以实现大量的图像效果(例如 透明、渐变 、阴影等)。

本案例中涉及到4种常用的CSS3属性:

  1. border-radius
  2. box-shadow
  3. text-shadow
  4. rgba

效果预览:利用CSS3制作无背景图片特效按钮


HTML:

<a>CSS3 无背景图片特效按钮 »</a>

CSS:

<style type="text/css">
 .awesome, .awesome:visited {
    background-color: #2daebf;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative; cursor: pointer; }
  .awesome:hover{ background-color: #007d9a; }
</style>

♥支付宝现金红包♥

支付宝现金红包,每天可领,红包金额最高 99元,使用无门槛,支付宝扫码付、还信用卡、充话费都可以使用。

支付宝红包领取方法:

  • 打开支付宝APP,首页搜索数字 1547638 即可领现金红包
  • 手机用户直接 点击这里领取
  • 或者支付宝APP扫描下面二维码领取
支付宝现金红包 每天可领

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.