日期:2014-05-17  浏览次数:20665 次

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