CSS3的卡通泡沫按钮
日期：2014-05-17 浏览次数：20681 次
CSS3的动画泡沫按钮
简介
这一次，我们正在创造一个有用的设置与对CSS3的多重背景和动画的力量动画按钮。通过此按钮包，您可以很容易地变成一个动画按钮，在您的网页上的任何链接只是指定一个类名。没有必要JavaScript。四色主题和三个大小也可通过分配额外的类名。
HTML
要打开网页上的常规链接成一个奇特的动画CSS3的按钮，你只需要到指定的按钮类和支持的颜色之一。请参阅下面的一些例子：
|
1
2
3
|
<a
href="#"
class="button blue big">Download</a><a
href="#"
class="button blue medium">Submit</a><a
href="#"
class="button small blue rounded">Submit</a> |
有四种颜色类 – 蓝色，绿色，橙色和灰色。其余的类，你看到分配给上面的链接，是可选的。您可以选择从规模小，中，大，一类 – 圆润，它创建了一个按钮更加圆润的版本。
类名选择，所以他们简单易记，但这就提出了一个与页面上的一些类的冲突的可能性。
现在让我们在仔细一看，做到这一点的CSS类。
CSS
所有动画按钮的CSS代码驻留在buttons.css。这使得很容易下降到现有的项目，并使用它。
请注意，整个的下面的代码，我定义了两个版本在一些地方的同一财产。这与浏览器处理CSS定义的方式。他们逐一解析规则，并将其应用，忽略了他们不明白的。这样我们就可以有一个理解所有的规则，这是普通版，一个CSS3的启用，将旧的忽视。
buttons/buttons.css
|
1
2
3
4
5
6
7
8
9
10
11
12
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
|
