一个扁平化的div按钮

本来打算使用css3动画的,搞了好久都没解决兼容性问题,索性不搞了,勉强先用着,以后再改吧。

按钮如下图:

css代码如下:

<style>
.ui-anim{width: 80px; height: 80px; line-height: 80px; margin: 0 auto 10px; text-align: center; background-color: #FFD700; cursor: pointer; color: #fff; border-radius: 50%;}
.ui-anim:hover {
background: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#FF0000));
background: -moz-linear-gradient(top,  #FF0000,  #FF0000);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#FF0000');
}
.layui-anim:active {
color: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#FFD700), to(#FFD700));
background: -moz-linear-gradient(top,  #FFD700,  #FFD700);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFD700', endColorstr='#FFD700');
}
</style>

html代码如下:
 <div class="ui-anim" ><a style="font-size:36px;"></a></div>

本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途,否则后果请用户自负。

本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。

如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。

本文链接:https://www.cmezy.com/blog/divan/

文本链接:一个扁平化的div按钮

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:创梦源码 谢谢

评论0

请先

没有账号? 忘记密码?