您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容主要讲解“怎么用CSS3制作漂亮的按钮”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用CSS3制作漂亮的按钮”吧!
今天我给大家介绍一下如何使用CSS3来制作一个圆角阴影、渐变色的漂亮的按钮，它不需要任何图片和javascript脚本，只需要CSS3就可以轻松实现按钮效果，并且可以适用于任意HTML元素，想p，span，p，a，button，input等等。
今天我给大家介绍一下如何使用CSS3来制作一个圆角阴影、渐变色的漂亮的按钮，它不需要任何图片和javascript脚本，只需要CSS3就可以轻松实现按钮效果，并且可以适用于任意HTML元素，想p，span，p，a，button，input等等。
这些纯CSS代码制作的按钮大小可以根据字体大小自动调整，渐变色背景可以兼容各浏览器，并且有正常、鼠标滑向、点击三种状态样式，当然，如果您的浏览器不支持CSS3，那么按钮将没有圆角和阴影效果。
首先我们熟悉下CSS3是如何实现圆角和阴影效果的。
CSS3提供了新的属性如：阴影text-shadow，box-shadow，和圆角border-radius，我们先来看这样一段CSS3代码：
text-shadow: 0 1px 1px rgba(0,0,0,.3);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
以上代码第一行设置了文字的阴影效果，它的用法结构：X轴偏移量，Y轴偏移量，模糊量，颜色，对于颜色可以使用RGBA模式。
第二行代码设置了边框盒子阴影效果，用法与文字阴影效果一样。
第三行和第四行分别表示在不同浏览器内核下的CSS3用法，-webkit-xxx表示webkit内核，-moz-xxx表示firefox内核。
border-radius用来设置圆角样式，同样有webkit和firefox之分。
border-radius: .5em;
-webkit-border-radius: .5em; /* for Webkit */
-moz-border-radius: .5em; /* for Firefox */
那么如何用CSS3处理渐变色的跨浏览器兼容的问题呢？在css2时代，我们通常会准备一张制作好的渐变背景图片，然后通过background-color来加载背景图片，从而实现背景色渐变效果。而CSS3，只需要区分不同浏览器内核下使用颜色来完成渐变效果。
background: #0095cd;
/* for Webkit */
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
/* for Firefox */
background: -moz-linear-gradient(top, #00adee, #0078a5);
/* for IE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee',
endColorstr='#0078a5');
对于webkit内核浏览器，-webkit-gradient()，linear表示渐变类型为线性渐变，left top表示渐变开始位置X轴和Y轴，left bottom表示渐变结束位置X轴和Y轴，from(#00adee), to(#0078a5)表示渐变色从#00adee到#0078a5。
对于firefox内核浏览器，-moz-linear-gradient(top, #00adee, #0078a5)中linear表示渐变类型为线性渐变，top表示渐变开始位置，后面表示两个颜色值的变化。
而对于IE内核，使用filter（滤镜），其中startColorstr和endColorstr分别表示开始颜色和结束颜色的变化值。
介绍完上面的CSS3特性，我们现在来使用CSS3制作漂亮的按钮效果。
1、首先你可以复制DEMO中的CSS代码。
2、在html页面中加入如下代码：
<a href="#" class="button green">亿速云服务器香港代购</a>
3、您将会得到以下按钮效果：
亿速云服务器香港代购
到此，相信大家对“怎么用CSS3制作漂亮的按钮”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。