标签归档:CSS3按钮

纯CSS3简易3D按钮 可配置背景颜色

今天我们要来分享一款相对简易的纯CSS3 3D按钮,其实要实现按钮的3D效果也比较简单,边线、阴影、投影,掌握好这几方面,就可以实现CSS3的3D按钮效果。今天的这款3D按钮可以自己配置背景颜色,因此按钮色彩非常丰富。

css3-simple-3d-button

在线演示源码下载

纯CSS3实现动感弹性按钮

今天我们来分享一款很有意思的CSS3按钮,当你把鼠标滑过按钮时,整个按钮就会全身扭动起来,像是有弹性一样,非常动感。另外,按钮的结构非常简单,你可以通过合适的配色,让按钮更加贴切你的网站,最后推荐另外一款CSS3按钮CSS3多样式小图标按钮 带分享按钮

css3-gelatin-button

在线演示源码下载

jQuery/CSS3实现超酷的分享按钮

之前我们介绍过几款不同的CSS3分享按钮,效果都挺不错,像这款CSS3各大网站分享按钮 带网站Logo小图标几乎包含了所有的社交网站分享按钮,这款纯CSS3社会化分享按钮可固定在网页顶部。今天要分享的这款分享按钮是基于CSS和jQuery的,按钮比较大,非常大气。

jquery-css3-share-button

在线演示源码下载

纯CSS3实现3D Twitter按钮 按钮可翻转

这是一款立体感很强的CSS3 3D按钮,按钮是一个twitter的图标,首先可以看出图标的制作十分精美,然后当你鼠标滑过按钮时,按钮即可翻转开来,显示twitter的用户名,用户可以点击进去进行关注操作,按钮在翻转的时候带有阴影,效果非常不错。

css3-twitter-3d-button

在线演示源码下载

CSS3超酷五彩按钮 鼠标滑过按钮颜色渐变

这是一款基于纯CSS3的一组按钮,按钮外观看起来也比较普通,但是显得十分淡雅清新和干净。每个按钮都可以设置两种颜色,分别是当前颜色和鼠标滑过时的颜色,两种颜色之间是以淡入淡出的动画效果过渡的,很平滑。另外这款按钮也比较灵活,你可以配置更多喜欢的颜色。

css3-colorful-buttons

在线演示源码下载

CSS3圆角动画按钮 按钮颜色丰富

前面刚刚分享过一款CSS3实现的分享按钮,非常简单实用。现在在来分享一款CSS3按钮,首先这款CSS3按钮是圆角的,正常情况下有着不同颜色的边框线,按钮是空心的,鼠标滑过按钮时,按钮即以淡入的效果填充背景色,鼠标移出时又以淡出的效果取消背景色,是一款简单而又实用的CSS3按钮。

css3-ghost-buttons

在线演示源码下载

CSS3小图标分享按钮 鼠标滑过按钮超酷动画

今天我们要来分享一款非常酷的CSS3小图标分享按钮,这款分享按钮每一个都有不同的颜色,整体看上去外观既简单又大方。该分享按钮有两组不同的鼠标滑过动画效果,一种是文字从左右飞入飞出,还有一种是按钮文字从上下淡入淡出,很简单的动画,但让整一个CSS3分享按钮显得很有动感。

css3-simple-button-icons

在线演示源码下载

CSS3环形分享按钮动画

分享按钮我们应该很熟悉了,在html5tricks上也分享过很多,像纯CSS3社会化分享按钮 可固定网页顶部CSS3发光社会分享按钮 超酷CSS3按钮组合都非常不错。今天要分享的这款CSS3分享按钮外观比较特别,是环形的按钮,鼠标滑过时即可将环形展开,动画效果还不错。

css3-circle-share-button

在线演示源码下载

纯CSS3实现开机按钮 按钮3D有光泽

这是一款利用纯CSS3实现的3D开机按钮,这款按钮并没有惊人的动画效果,但是却利用了CSS3的许多特性给按钮添加了阴影以及光泽,让按钮显得非常立体。而且按钮的设计也非常富有创意,是一个开关机的按钮外观,设计独具匠心。大家也可以到CSS3按钮这里查看更多漂亮的按钮特效。

css3-power-button

在线演示源码下载

CSS3 3D按钮 按钮有漂亮的边线

今天要分享的这款CSS3按钮效果非常不错,是一款3D的按钮特效,当按钮按下时,按钮便会凹陷下去,效果和之前分享的CSS3超酷3D弹性按钮效果类似。另外,这款CSS3 3D按钮还有一个特点,按钮左侧边有漂亮的边线。

css3-3d-button-border

在线演示源码下载