标签归档:CSS3按钮

超酷的CSS3复古风格和字体的3D按钮

我们分享过很多基于CSS3的3D按钮,很多都非常漂亮,例如这篇7款外观迷人的HTML5/CSS3 3D按钮特效文章中就收藏了不少。这次我们要带来一款也是基于CSS3的3D按钮,它有着复古的风格和字体。第一个按钮根据光标在悬停时的位置向左或向右倾斜,它的风格类似于老式游戏机按钮。 这些按钮配置了sm,md,lg大小类以及bootstrap-esque类,如primary,secondary,dangerous,warning,success和info。第二个按钮是一个加载程序按钮,按下它时会有自己的进度条。 它只会向中心推动,但随后向上打开,在它的正面显示一个进度条。 根据操作的成功与否,它将在完成时显示具体信息。

css3-3d-retro-button

在线演示源码下载

基于CSS3的iOS风格开关切换按钮

之前我们为大家分享过一些外观富有创意而且实用的CSS3开关切换按钮,比如这个纯CSS3表情切换样式的开关切换按钮多组超具创意的CSS3开关切换按钮。这次我们带来另外一款基于CSS3的iOS风格开关切换按钮,它的样式是iOS风格的,其中一个特点是你不能同时选中这3项。

css3-ios-switch-button

在线演示源码下载

JavaScript和CSS3实现跟随鼠标发光的按钮

在深色背景的网页中,我们经常会采用一些高亮效果的按钮来使整个页面更加协调。这次我们要分享一个用JavaScript和CSS3实现的发光按钮,当鼠标在按钮上或者按钮周围时,发光的效果就会跟随鼠标移动,在深色背景页面中,这种发光动画的按钮还是很漂亮的。

javascript-css3-shine-button

在线演示源码下载

超富创意的纯CSS3下载按钮

这是一款超富创意并且十分可爱的CSS3下载按钮,按钮中有一个通过CSS3绘制而成的下载图标,并且当鼠标悬停在按钮上时,该下载图标会循环播放下载动画。这款CSS3下载按钮在鼠标滑过和离开时均会发生形状的变化,外观上也非常富有创意。

pure-css3-download-button

在线演示源码下载

纯CSS3表情切换样式的开关切换按钮

最近我们分享过很多款富有创意的CSS3开关切换按钮,比如这款漂亮的纯CSS3开关切换按钮动画和这款纯CSS3可爱笑脸开关切换按钮,这次我们要给大家带来的这款开关切换按钮同样也很富有创意,它是纯CSS3实现的表情样式,点击时会在笑脸和哭脸之间切换,同时还会不断眨眼睛。

pure-css3-face-style-switch

在线演示源码下载

漂亮的纯CSS3开关切换按钮动画

之前我们为大家分享过很多款各式各样的CSS3开关切换按钮,很多还是非常富有创意的,比如这里的多组超具创意的CSS3开关切换按钮纯CSS3灯光开关动画。今天我们要带来另外一款外观很漂亮的纯CSS3开关切换按钮动画,它模拟了电灯的开关,并且在开和关之间切换时按钮的背景会有不同的变化,看起来非常不错。

pure-css3-pretty-switch-button

在线演示源码下载

纯CSS3超友爱的带小图标3D按钮

今天要给大家带来一款非常友爱的纯CSS3动画3D按钮,按钮的特点是纯CSS3实现,按钮边线衬托出3D的视觉效果。最大的特点是,我们可以在按钮两边添加非常漂亮的小图标,小图标可以让按钮的功能更加显著,而且按钮的外观也更加漂亮。

pure-css3-pretty-icon-button

在线演示源码下载

纯CSS3背景变幻的分享按钮组合

这是一款相当实用而且美观的纯CSS3分享按钮组合,它的特点是当鼠标滑过按钮时,按钮的背景将会出现多边形变幻的动画效果,同时分享按钮的Logo也会放大显示。类似这种鼠标滑过动画的分享按钮还有很多,比如之前介绍的CSS3社会化分享图标 可旋转和悬停也非常炫酷。

pure-css3-share-button-animate

在线演示源码下载

纯CSS3可爱笑脸开关切换按钮

近期我们集中为大家分享过很多基于HTML5和CSS3的开关切换按钮,像这款多组超具创意的CSS3开关切换按钮拥有多套风格的外观,还有这款漂亮的CSS3/SVG个性化开关按钮又非常具有创意。今天要分享的这款同样也富有创意,整个开关按钮由笑脸和哭脸组成,点击按钮后可以在笑脸哭脸之间切换,另外按钮带有阴影,看起来有3D立体的视觉效果。

pure-css3-face-switch

在线演示源码下载

多组超具创意的CSS3开关切换按钮

前不久我们刚刚为大家分享过一款超清新的纯CSS3自定义Checkbox开关,非常简洁美观。今天我们要继续为大家介绍多组超具创意的CSS3开关切换按钮,一共有8款漂亮的样式。这种纯CSS3开关切换按钮非常适合一些个性化比较强的表单页面中使用。

css3-creative-switch-button

在线演示源码下载