css3实现漂亮的按钮链接

最新推荐文章于 2022-11-09 10:42:22 发布

weixin_30800987

最新推荐文章于 2022-11-09 10:42:22 发布

阅读量108

点赞数

原文链接：http://www.cnblogs.com/libmw/archive/2013/01/05/2846396.html

版权

现在css3已经强大到不得不学了，对我这个对css没什么专研的人来说，任何一个css做出来的炫效果都是值得我兴奋一天的。

今天用css3的动画和圆角弄了一个个人觉得比较帅的效果，不仅仅是效果帅，跟主要的是实现方式实在是太简单了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>css3漂亮按钮</title> <style> .round{ display: block; width:30px; height:30px; background-color:rgba(249, 13, 20, .75); white-space: nowrap; /*保证不换行*/ -webkit-transition: all .25s ease-in-out } .round:hover { width:230px; background-color:rgba(249, 13, 20, .9); } </style> </head> <body> <a class="round">测试a标签</a> </body> </html>

原理很简单，主要是-webkit-transition: all .25s ease-in-out为属性改变添加了动画，从而得到不错的效果。

当然，既然是css3，我们怎能放过圆角：

border-radius: 15px;

文字此时太靠左，高度也不对，加上indent和line-height ：

line-height: 30px;
text-indent: 35px;

这下好看多了：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>css3漂亮按钮</title> <style> .round{ display: block; width:30px; height:30px; background-color:rgba(249, 13, 20, .75); white-space: nowrap; /*保证不换行*/ -webkit-transition: all .25s ease-in-out; border-radius: 15px; line-height: 30px; text-indent: 35px; } .round:hover { width:230px; background-color:rgba(249, 13, 20, .9); } </style> </head> <body> <a class="round">测试a标签</a> </body> </html>

转载于:https://www.cnblogs.com/libmw/archive/2013/01/05/2846396.html

weixin_30800987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3实现漂亮的按钮链接

现在css3已经强大到不得不学了，对我这个对css没什么专研的人来说，任何一个css做出来的炫效果都是值得我兴奋一天的。今天用css3的动画和圆角弄了一个个人觉得比较帅的效果，不仅仅是效果帅，跟主要的是实现方式实在是太简单了。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3...
复制链接

扫一扫