标签归档:CSS3按钮

CSS3自定义Radiobox样式 开关按钮效果

今天我们要来分享一款基于CSS3的自定义Radiobox样式,是通过定义label样式实现的。这款CSS3 Radiobox样式的开关按钮可以帮你实现点击切换的特效,你也可以用它来替换古老而丑陋的Radiobox控件,效果非常不错的CSS3应用。

css3-radio-switch-button

在线演示源码下载

CSS3 3D立体按钮 鼠标滑过发光特效按钮

今天我们要来分享一款基于CSS3的3D按钮特效,这款3D按钮利用了大部分CSS3特有的属性,首先是内凹,然后是外凸,最后再给按钮加上阴影,这些特效都是通过CSS3属性实现。另外,这款CSS3按钮还有一个特点是当鼠标滑过按钮时,会出现微微发光的特效,非常酷。

css3-3d-shine-button

在线演示源码下载

CSS3分享按钮动画特效

这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter、facebook、youtube等大型社交网站。每一个分享按钮都有个大社交网站的Logo图标,并且在鼠标滑过这些按钮时,利用CSS3的动画特性出现滑动的动画效果。

css3-share-button-animation

在线演示源码下载

纯CSS3动画按钮 可左右滑动

利用CSS3的一些动画属性,我们可以让一些平凡的按钮变得生动有趣,提高用户体验。今天分享的这款CSS3动画按钮就非常特别,只要你用鼠标滑过按钮,按钮的背景就会出现一个很可爱的滑块背景,这个滑块背景可以左右滑动,鼠标移出按钮时,又会将滑块移出,看下面的按钮演示,非常动感。

css3-slide-button-animation

在线演示源码下载

纯CSS3实现发光动画按钮特效

这是一款基于纯CSS3的发光按钮,按钮发光的颜色是随机的,这样一排按钮就显得五彩缤纷,非常绚丽。之前我们也介绍过不少样式很独特的CSS3按钮,比如纯CSS3 3D开关按钮纯CSS3实现动感弹性按钮等,都非常不错,也有HTML5动画按钮,大家可以自己看看。

pure-css3-shine-button

在线演示源码下载

纯CSS3 3D浮动按钮

这次我们来分享一款效果很酷的纯CSS3 3D浮动按钮,按钮是一个3D立体的悬浮圆形,按钮上面可以是文字和爱心图案,按钮底部还有阴影效果,显得很立体。另外,当把鼠标滑过按钮时,按钮就会下陷,就像在水面上下沉一样。

pure-css3-3d-float-button

在线演示源码下载

纯CSS3水平控制按钮开关

今天我们要来分享一款基于纯CSS3的水平控制开关按钮,它有3种不同的颜色风格,开关按钮的数量可以自己定义,鼠标点击按钮时背景色块将会缓慢移动到所在的按钮位置,表示用户已经选中这个选项。我们可以用它来控制用户的选择项。

pure-css3-hor-button-switch

在线演示源码下载

纯CSS3 3D开关按钮 可左右滑动

这次我们要来看一款非常酷的CSS3 3D开关按钮,点击按钮可以左右滑动,就像开关打开闭合一样的效果,之前也分享过类似的开关按钮,比如纯CSS3实现滑杆开关切换按钮动画CSS3 3D发光切换按钮 模拟效果很逼真就非常不错,大家也可以看看。

css3-3d-switch-button

在线演示源码下载

纯CSS3背景图标渐变按钮

今天我们要来分享一组非常可爱的CSS3按钮组合,这款按钮的效果是当你把鼠标滑过它们时,按钮上的背景小图标就会发生渐变效果,类似淡入淡出的特效。类似这种炫酷的CSS3按钮还有很多,比如纯CSS3实现动感弹性按钮,动画效果也非常不错。

css3-icon-bg-animated-button

在线演示源码下载

一组超酷的CSS3 3D按钮 可定义尺寸和颜色

今天我们要来分享一款超酷的CSS3 3D按钮,这款3D按钮的设计也十分简单,支持3种不同的色彩和3种不同的尺寸大小。CSS3 3D按钮效果之前我们也分享过不少了,比如这款纯CSS3实现3D Twitter按钮 按钮可翻转

css3-3d-button-color-size

在线演示源码下载