10月 162014
 

很多网站有些按钮效果不错,但像保存时候却发现不是一个图片,有点急人,其实看一下网页源代码就能发现,这些效果原来是用css来实现的。

大家都知道,图片越多,页面加载速度就越慢,特别是做mobile offer时候,一个LP如果加载时间过长,被直接关闭的可能性就越大,所以假如这个按钮效果直接用css来实现,速度肯定有所提升(虽然也就几个微秒的时间)。

下面分享给大家这个代码,我的LP一般都是采用这个,嫌丑的话可以请自行修改对应的值。

.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 2rem;
color: #ffffff;
padding: 2% 5%;
background: -moz-linear-gradient(
top,
#53fc53 0%,
#007311);
background: -webkit-gradient(
linear, left top, left bottom,
from(#53fc53),
to(#007311));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #00b80c;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
text-shadow:
0px -1px 0px rgba(0,0,0,1),
0px 1px 0px rgba(255,255,255,0.2);
}

显示效果见下图。

jietu



原文作者:老爷兵(laoyebin)
本站地址:老爷兵谈网赚
本文链接:分享一个仿按钮效果的css代码
版权归作者所有,转载请保留作者信息和原文链接,非常感谢。

 Leave a Reply

(必须)

(必须)

This site uses Akismet to reduce spam. Learn how your comment data is processed.