活泼的CSS 3动态气泡按钮制作

这一次,我们正在创造一个有用的设置与对CSS3的多重背景和动画的力量动画按钮。通过此按钮包,您可以很容易地变成一个动画按钮,在您的网页上的任何链接只是指定一个类名。没有必要JavaScript。四色主题和三个大小也可通过分配额外的类名。孟津县二中

要打开网页上的常规链接成一个奇特的动画CSS3的按钮,你只需要到指定的按钮类和支持的颜色之一。请参阅下面的一些例子:

view source

print?

1 <a href="#" class="button blue big">Download</a>
2 <a href="#" class="button blue medium">Submit</a>
3 <a href="#" class="button small blue rounded">Submit</a>

有四种颜色类 – 蓝色,绿色,橙色和灰色。其余的类,你看到分配给上面的链接,是可选的。您可以选择从规模小,中,大,一类 – 圆润,它创建了一个按钮更加圆润的版本。

所有动画按钮的CSS代码驻留在buttons.css。这使得很容易下降到现有的项目,并使用它。

请注意,整个的下面的代码,我定义了两个版本在一些地方的同一财产。这与浏览器处理CSS定义的方式。他们逐一解析规则,并将其应用,忽略了他们不明白的。这样我们就可以有一个理解所有的规则,这是普通版,一个CSS3的启用,将旧的忽视。

我们需要做的第一件事是定义按钮类。这是按钮的骨干,因为它适用于定位,字体和背景样式。

首先是与字体相关的样式,在这之后如下显示属性。它被设置为inline – block的,这使得它能够坐在其周围的文本(如内联元素)的同一行,但也像一个方面的填充和利润率块。

在某一时刻,你会看到每个按钮有四个背景图像应用到它。虽然这听起来很吓人,只有一个文件,实际上是要求从服务器。前两个背景,左下角和右上角部分泡沫图像,你可以看到下面的插图,和其他两个是纯CSS的梯度。

正如我上面提到的的,泡沫的背景是显示为两个单独的图像,背景位置属性的偏移。使用CSS3的过渡属性,我们定义动画,在这两个版本的背景图片幻灯片的顶部或底部恭恭敬敬,你看到悬停按钮时产生泡沫效应。

view source

print?

01 /* BlueButton */
02  
03 .blue.button{
04     color:#0f4b6d !important;
05  
06     border:1px solid #84acc3 !important;
07  
08     /* A fallback background color */
09     background-color: #48b5f2;
10  
11     /* Specifying a version with gradients according to */
12  
13     background-image:    url(‘button_bg.png‘), url(‘button_bg.png‘),
14                         -moz-radial-gradient(    center bottom, circle,
15                                                 rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
16                         -moz-linear-gradient(#4fbbf7, #3faeeb);
17  
18     background-image:    url(‘button_bg.png‘), url(‘button_bg.png‘),
19                         -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
20                                             from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
21                         -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
22 }
23  
24 .blue.button:hover{
25     background-color:#63c7fe;
26  
27     background-image:    url(‘button_bg.png‘), url(‘button_bg.png‘),
28                         -moz-radial-gradient(    center bottom, circle,
29                                            rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
30                         -moz-linear-gradient(#63c7fe, #58bef7);
31  
32     background-image:    url(‘button_bg.png‘), url(‘button_bg.png‘),
33                         -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
34                                             from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
35                         -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
36 }

每种颜色的类定义了独特的一套独特的属性 – 按钮的文本标签的颜色,文字阴影和背景图像。注意,我们使用的背景属性按钮添加多个图像。他们是分层的顶部,首先出现在上面定义的。

只有Mozilla和Webkit浏览器目前支持CSS的梯度,但与完全不同的语法。其余的浏览器将显示回退的背景颜色。您可能已经注意到,我们没有包括一个免费版本的渐变规则的前缀。这是由于梯度不是一个CSS规范尚未正式的一部分的事实,并没有首选语法协议。

在上面的片段中,你可以看到,我们定义在它上面的线性渐变和径向之一。为了使渐变交融,更顺利的WebKit和Mozilla的语法,我们定义,这使得外完全透明的渐变颜色的RGBA径向之一。

有了这个,我们的CSS3动画泡沫按钮完成!

总结

这些按钮是完全基于CSS和整合是非常简单 – 只是下降的按钮文件夹在您的项目中的某处。通过修改CSS文件,您可以创建自己的颜色和形状。

时间: 2024-10-01 04:41:41

活泼的CSS 3动态气泡按钮制作的相关文章

纯CSS3彩色边线3D立体按钮制作教程

今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示效果,而且我们把制作教程也分享出来,首先来看看效果图: 我们也可以在这里看到这些按钮的DEMO演示. 接下来就来分享一下制作教程以及源代码,按钮的源代码主要由HTML和CSS两部分代码组成,先来看看HTML代码: <button class="blue"> <div class="wrapper"

超漂亮的CSS3按钮制作教程分享

要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6/Chrome浏览器 演示地址 演示地址 利用CSS3属性制作按钮,我们只需要用到Gradient属性,不用使用任何图片素材和JavaScript代码,仅仅通过CSS就能制作出好看的渐变按钮.按钮的大小可以通过CSS属性就能轻松的修改,而且它可以使用html的很多标签来制作,比如div,button,span,a,input[‘submit’]等等.下列案例就是通过CSS3制作的按

python tkinter动态追加按钮等控件可能遇到的问题

小爬最近给同事制作一个小爬虫:具体要求: 1.每天自动定时触发: 2.模拟用户自动登陆: 3.自动爬取对应API接口数据: 4.对爬取结果进行逻辑判断,对符合条件的数据进行规则化列示: 5.列示的行项目支持超链接,如果用用户已经通过浏览器登陆过,该超链接需要能支持单击后在浏览器内新建选项卡并直接进入对应的表单,无需再次登陆. 小爬思考了下:整个程序的功能实现中,2.3.4步骤涉及的功能在先前小爬编写的一些自动化工具中已经有实现过,所以与小爬而言,核心问题就是步骤1和5:经过翻阅相关资料,“每天自

GUI动态创建按钮

#include "cocos2d.h" #include "cocos-ext.h" USING_NS_CC; USING_NS_CC_EXT; using namespace ui; UIButton *button = UIButton::create(); button->setTouchEnabled(true); button->loadTextures("close1.png", "close2.png&quo

纯CSS实现的气泡提示框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta charset=&quo

MFC动态创建按钮,并在按钮上实现位图的切换显示】

动态创建按钮,并在按钮中添加位图,通过单击按钮显示不同的位图,可设置为显示按钮按下和弹起两种状态.只要判断a值从而输入不同的响应代码. 1.在头文件中添加: CButton *pBtn; 2.在初始化函数中添加: pBtn = new CButton(); pBtn->Create(_T("My button"), WS_CHILD|WS_VISIBLE|BS_PUSHBUTTON|BS_BITMAP, CRect(0,0,100,40), this, IDC_BUTTON);/

Linux下C++静态库、动态库的制作与使用

参考博文:C++静态库与动态库 >> 静态库 1. 静态库的制作 a) 编辑 name.cpp 和name.h文件 b) $g++ -c name.cpp //注意带参数-c,否则直接编译为可执行文件 c) $ar -crv libname.a name.o  //通过ar工具将目标文件打包成.a静态库文件 2静态库的使用 a) 所用程序中包含静态库的头文件 b)$g++ useStaticLibray -L ./StaticDirectory -l name //只需要在编译的时候,指定静态

静态库与动态库的制作

1.相关知识 (1).不管是制作静态库还是动态库,都得对.o文件进行打包: (2).在/lib64目录下,静态库文件.a,动态库文件.so 2.静态库 (1).gcc -c add.c    ------> 生成add.o文件,其中通过参数(-c): (2).静态库由命令ar创建:  ar  -cr  add.a  add.o   (3).静态库的编译有两种方法:   a:gcc test.c -o test -L. add.a     //每次都得在编译时加上-L. 静态库文件: b.将.a文

Linux下静态库和动态库的制作与使用

p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-bottom: .0001pt; text-align: justify; font-size: 10.5pt; font-family: "Times New Roman", serif } h2 { margin-top: 14.0pt; margin-right: 0cm; margin-bottom: 14.0pt; margin-left: 28.8pt;