CSS3按钮动画在一个神奇的冒泡的背景
HTML代码:
xml代码将内容复制到剪贴板。
大按钮
大按钮
大按钮
大按钮
中的按钮
中的按钮
中的按钮
中的按钮
小按钮
小按钮
圆形的
小按钮
小按钮
圆形的
CSS代码:
CSS代码将内容复制到剪贴板。
按钮{。
15px字体:宋体、Arial、无衬线字体;
一个半透明的文本阴影
文字阴影:1px 1px 0 RGBA(255255255,0.4);
重写默认的下划线链接
文字装饰:无!重要;
朵朵的空间:不换行;
显示:内联块;
垂直对齐:baselinebaseline;
职位:相对;
光标:指针;
填料:10px 20px;
后台重复:不重复;
以下两个规则/回退的情况下
浏览器不支持多个背景。
背景位置:bottombottom左;
背景图像:URL('button_bg。png);
背景版。背景图像多重
在颜色类中单独定义。
背景位置:bottombottom左,前放,00, 00;
背景剪辑:边框框;
应用默认边框raidus / * * / 8px
-moz边界半径:8px;
WebKit的边界半径:8px;
边界半径:8px;
一个像素内突出的 / * * /按钮
-moz盒阴影:插图0 0 1px # FFF;
Webkit框阴影:插图0 0 1px # FFF;
箱的影子:插图0 0 1px # FFF;
动画背景的位置与CSS3 / * * /
目前仅在Safari / Chrome中工作
WebKit的转型:背景位置1s;
-moz转型:背景位置1s;
转换:背景位置1;
}
按钮:悬停{
第一条规则是浏览器的后退。
不支持多个背景
* /
背景位置:左上方;
背景位置:左上,bottombottom错误,00, 00;
}
按钮:活动{
移动按钮1px的底部单击时* / *
Bottombottom:- 1px;
}
三个按钮大小
字体大小:30px。button.big {;}
字体大小:18px。button.medium {;}
字体大小:13px。button.small {;}
一个更圆的按钮
按钮。舍入{
-moz边界半径:4em;
WebKit的边界半径:4em;
边界半径:4em;
}
定义四个按钮颜色
再选择 / * * /
蓝色按钮{
颜色:# 0f4b6d!重要;
边境:1px solid # 84acc3!重要;
后退背景颜色
背景颜色:# 48b5f2;
指定一个具有渐变的版本
背景图像:URL('button_bg。png),URL('button_bg。png),
-moz径向渐变(中心bottombottom,圆,
RGBA(89208244,1)0,RGBA(89208244,0)100像素),
-moz线性梯度(# 4fbbf7,# 3faeeb);
背景图像:URL('button_bg。png),URL('button_bg。png),
-webkit-gradient(径向,50%,100%,0, 50,100%,100,
从(RGBA(89208244,1)),以(RGBA(89208244,0))),
-webkit-gradient(线性的,0%,0%,0%,100%,从(# 4fbbf7),以(# 3faeeb));
}
蓝色:按钮:悬停{
背景颜色:# 63c7fe;
背景图像:URL('button_bg。png),URL('button_bg。png),
-moz径向渐变(中心bottombottom,圆,
RGBA(109217250,1)0,RGBA(109217250,0)100像素),
-moz线性梯度(# 63c7fe,# 58bef7);
背景图像:URL('button_bg。png),URL('button_bg。png),
-webkit-gradient(径向,50%,100%,0, 50,100%,100,
从(RGBA(109217250,1)),以(RGBA(109217250,0))),
-webkit-gradient(线性的,0%,0%,0%,100%,从(# 63c7fe),以(# 58bef7));
}
绿色按钮
绿色按钮{
颜色:# 345903!重要;
边境:1px solid # 96a37b!重要;
背景颜色:# 79be1e;
背景图像:URL('button_bg。png),URL('button_bg。png),-个径向渐变(中心bottombottom,圈,RGBA(162211,30,1)0,RGBA(162211,30,1)),和(
背景图像:URL('button_bg。png),URL('button_bg。png),-webkit-gradient(径向,50%,100%,0, 50,100%,100,从(RGBA(162211,30,1)),以(RGBA(对))),和((0%,0%,0%,100%),(())
}
绿色:按钮:悬停{
背景颜色:# 89d228;
背景图像:URL('button_bg。png),URL('button_bg。png),-个径向渐变(中心bottombottom,圈,RGBA(183229,45,1)0,RGBA(183229,45,1)),和(
背景图像:URL('button_bg。png),URL('button_bg。png),-webkit-gradient(径向,50%,100%,0, 50,100%,100,从(RGBA(183229,45,1)),以(RGBA(对))),和((0%,0%,0%,100%),(())
}
橙色按钮
橙色按钮{
颜色:# 693e0a!重要;
边境:1px solid # bea280!重要;
背景颜色:# e38d27;
背景图像:URL('button_bg。png),URL('button_bg。png),-个径向渐变(中心bottombottom,圈,RGBA(232189,45,1)0,RGBA(232189,45,1)),和(
背景图像:URL('button_bg。png),URL('button_bg。png),-webkit-gradient(径向,50%,100%,0, 50,100%,100,从(RGBA(232189,45,1)),以(RGBA(对))),和((0%,0%,0%,100%),(())
}
橙色按钮:悬停{
背景颜色:# ec9732;
背景图像:URL('button_bg。png),URL('button_bg。png),-个径向渐变(中心bottombottom,圈,RGBA(241192,52,1)0,RGBA(241192,52,1)),和(
背景图像:URL('button_bg。png),URL('button_bg。png),-webkit-gradient(径向,50%,100%,0, 50,100%,100,从(RGBA(241192,52,1)),以(RGBA(对))),和((0%,0%,0%,100%),(())
}
灰色按钮{
颜色:# 525252!重要;
边境:1px solid # a5a5a5!重要;
背景颜色:# a9adb1;
背景图像:URL('button_bg。png),URL('button_bg。png),-个径向渐变(中心bottombottom,圈,RGBA(197199202,1)0,RGBA(197199202,1)),和(
背景图像:URL('button_bg。png),URL('button_bg。png),-webkit-gradient(径向,50%,100%,0, 50,100%,100,从(RGBA(197199202,1)),以(RGBA(对))),和((0%,0%,0%,100%),(())
}
灰色按钮:悬停{
背景颜色:# b6bbc0;
背景图像:URL('button_bg。png),URL('button_bg。png),-个径向渐变(中心bottombottom,圈,RGBA(202205208,1)0,RGBA(202205208,1)),和(
背景图像:URL('button_bg。png),URL('button_bg。png),-webkit-gradient(径向,50%,100%,0, 50,100%,100,从(RGBA(202205208,1)),以(RGBA(对))),和((0%,0%,0%,100%),(())
}
以上是本文的全部内容,希望能对大家有所帮助。