css 如何实现一个水晶按钮的效果呢?


摘要:
下文讲述使用css脚本实现一个水晶按钮的效果的方法分享,如下所示:

实现思路: 
    使用css线性渐变(linear-gradient)实现一个水晶按钮效果

例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>猫猫教程(maomao365.com)
         水晶按钮示例分享
    </title>
        <style>
            #btn{
                display: block;
                width: 330px;
                height: 60px;
                border: 1px solid gray;
                background: -moz-linear-gradient(top,blue,#00ffff);
                background: -webkit-linear-gradient(top,blue,#00ffff);
                background: -o-linear-gradient(top,blue,#00ffff);
                background: -ms-linear-gradient(top,blue,#00ffff);
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
     <p>
      maomao365.com <br />
      css 水晶按钮的示例分享
     </p>
     <hr />
        <button id="btn"></button>
    </body>
</html>
css实现一个水晶按钮的示例分享

css实现一个水晶按钮的示例分享