如何制作扁平化按钮:纯css如何实现纯色切换按钮

 2014-12-17 23:10:26   评论   2,947次浏览

我们在使用网页设计元素的时候,经常会用到按钮组件,尤其是在目前扁平化结构比较流行的设计风格下, 纯色背景按钮都将成为新宠,那么如何快速创建一个纯色背景的按钮呢?

首先,我们需要做一个标签就是span或者是div标签,为了写着简单方便,这里就以div标签为例,写一个按钮。先把代码清单写出来,然后给大家分享一些实际操作中的使用技巧。

代码清单:

<a href="https://www.jinshare.cn/yyzq/">

<div style=" width:150px;margin-bottom:20px;text-align:center;background-color:#F30;border-radius: 10px;color:#fff;line-height:200%;">

业余时间如何赚钱

</div>

</a>

整体的效果如下:

大按钮显示

当然,我们可以在使用过程中对代码进行一些交互设计。

按钮的高度和宽度可以根据实际需要来调整,还有按钮的背景演示可以在鼠标经过的时候来显示不同的演示。

使用a:hover:{background-color:(这里输入色值);}来控制一个按钮的交互效果,或者修改这个div的透明度来实现按钮的切换交互效果。

当然还有一点需要提到的是border-radius属性是css3中一个新增属性,在版本较低的ie浏览器中可能是不支持的,大家可以通过调整border-radius这个属性的值来控制按钮圆角的程度。

蚂蚁森林为我浇水吧!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: