标签归档:CSS3按钮

纯CSS3动画按钮效果 5种漂亮样式

这次我们要来分享一款很不错的CSS3按钮动画,这款CSS3按钮一共有5种动画方式,每一种都是鼠标滑过动画形式,虽然这些动画按钮不是十分华丽,但是小编觉得不像其他按钮那样很难扩展,我们可以修改CSS代码随意改变自己喜欢的颜色样式。

css3-animation-button-5-styles

让我们一起来看看实现这5中样式动画按钮的HTML代码和CSS代码吧。以第一个按钮为例,其他按钮的代码大家可以下载源代码来研究,并不是很难。

HTML代码:

<div class="button01">
      <a href="#">Download</a>
      <p class="top">click to begin</p>
      <p class="bottom">1.2MB .zip</p>
</div>

CSS代码:

.button01 {
  width: 200px;
  margin: 50px auto 20px auto;
}

.button01 a {
  display: bloc[......]

阅读全文>>

纯CSS3实现发光开关切换按钮

前段时间我们向大家分享过一款牛奶般剔透的CSS3 3D开关按钮,效果相当赞。今天我们要来分享一款类似的纯CSS3发光开关切换按钮,它的外观就像一个电灯的开关,可以左右切换。另外开关上的文字还有发光的特效,整体看上去很有立体感。

pure-css3-shine-switch-button

在线演示源码下载

纯CSS3实现关闭按钮 6组自定义按钮样式

CSS3并不是只可以制作一些超酷的动画效果,如果你有创意,CSS3也可以帮助你实现简单而实用的Web应用。今天要分享一款纯CSS3实现的关闭按钮,看上去这些关闭按钮很单调,但是仔细一看你会发现,居然一共有6组不同的样式,如果你想在一个网页窗口中添加一个自定义关闭按钮,那么就可以参考这个CSS3应用。

css3-close-button

在线演示源码下载

CSS3灰色按钮组合 3D效果按钮

今天我们要来分享一款很富有3D立体视觉效果的CSS3按钮组合,类似这样的CSS3按钮我们还可以看这款CSS3灰色按钮菜单 超具3D立体感,效果也非常不错。今天的这款按钮组合可以有大尺寸和小尺寸按钮,鼠标滑过按钮时就会改变按钮的背景色,让其有发光的立体效果。

css3-3d-grey-button

在线演示源码下载

一组带Tooltip提示框的CSS3图标按钮

今天我们来分享一组非常酷的CSS3小图标,这组CSS3按钮一共有170多个小按钮,每一个按钮都有不同的小图标,鼠标滑过按钮时还会出现一个Tooltip提示框,提示框的内容可以再HTML中定义,使用起来非常方便。另外需要说明的是,这么多图标按钮是纯HTML+CSS实现的。

tooltip-css3-icon

在线演示源码下载

纯CSS3实现Metro风格的图标按钮

今天我们要来分享一款基于纯CSS3的按钮图标,这款CSS3图标是Metro风格的,外观非常清新漂亮。同时,当鼠标滑过图标是,还会在图标上方滑过文字描述,带飞入飞出的动画特效。另外也有一些图标有放大缩小的动画效果。

pure-css3-metro-icon

在线演示源码下载

纯CSS3实现分享按钮 包含常用社交网站按钮

之前我们有介绍过不少非常实用的分享按钮,有基于HTML5和CSS3的,也有基于jQuery和CSS的,效果都非常不错。今天我们再来分享一款纯CSS3实现的社会化分享按钮,这款纯CSS3分享按钮没有使用图片,而且包含了基本的常用社交网站的分享按钮。

pure-css3-social-buttons

在线演示源码下载

HTML5/CSS3动画图标按钮

今天要分享一款基于HTML5和CSS3的动画按钮,当然,这款CSS3按钮也可以当作图标来使用。利用CSS3的动画属性,当我们用鼠标划过按钮时,整个按钮就会出现非常炫酷的动画效果。当然这需要支持CSS3的浏览器才可以播放动画。

html5-css3-animate-icon-button

在线演示源码下载

HTML5/CSS3社会化分享按钮 图标和图文按钮样式

这次我们要来分享一款基于HTML5和CSS3的社会化分享按钮,这款分享按钮外观样式非常漂亮,按钮的色彩也比较华丽自然,这款基于HTML5的分享按钮提供两种样式,一种是图标式按钮,另一种则是图标结合文字的按钮样式。这款分享按钮涵盖了大部分国外知名的社交网站,一次是一款非常实用的HTML5/CSS3社会化分享按钮应用。

html5-css3-social-buttons

在线演示源码下载

HTML5/CSS3一组可爱的3D按钮

这是一款利用HTML5和CSS3制作而成的按钮组合,这款CSS按钮非常具有个性化。该CSS3按钮不仅具有3D的外观,点击按钮也具有非常立体的效果,更具有特点的是这款CSS3按钮的形状是不规则的,而且按钮中都有一个可爱的小图标。

html5-css3-pretty-button

在线演示源码下载