按钮 20种炫酷CSS3按钮样式和鼠标滑过特效

CSS3-button-hover-effect-20-type

这是一款集合20组不同 CSS3 按钮样式和按钮鼠标滑过特效的插件。这20组CSS3按钮每一组都有3种示例,每一个示例都使用CSS3制作炫酷的鼠标滑过动画。这些按钮适用于各种场合,相信总有一款适合你。

该按钮插件中使用鼠标HOVER来作为按钮动画的触发事件,有一些按钮动画效果更适合于鼠标点击事件,这些都可以十分容易修改和实现。

请注意这些按钮动画效果只在最新版本的现代浏览器上工作,(Mobile)Safari浏览器只支持其中很少的效果。

该按钮动画特效中大多数使用的是CSS transitions,但有一些动画效果也使用CSS animations来完成。

使用方法

HTML结构

<button class="button button--ujarak">Vote</button>

通用按钮样式

下面是所有按钮的通用样式:

/* Common button styles */
.button {
  float: left;
  min-width: 150px;
  max-width: 250px;
  display: block;
  margin: 1em;
  padding: 1em 2em;
  border: none;
  background: none;
  color: inherit;
  vertical-align: middle;
  position: relative;
  z-index: 1;
}

.button:focus {
  outline: none;
}

.button > span {
  vertical-align: middle;
}

在某些按钮效果中,在按钮中添加了一些额外的标签例如一个span或几个span。还有一些效果使用了超链接,在这些效果中需要将HTML元素替换为元素,并调整它的样式。

下面是按钮的一些控制样式,如:border、border-radius和尺寸大小。

/* Sizes */
.button--size-s {
  font-size: 14px;
}

.button--size-m {
  font-size: 16px;
}

.button--size-l {
  font-size: 18px;
}

/* Typography and Roundedness */
.button--text-upper {
  letter-spacing: 2px;
  text-transform: uppercase;
}

.button--text-thin {
  font-weight: 300;
}

.button--text-medium {
  font-weight: 500;
}

.button--text-thick {
  font-weight: 600;
}

.button--round-s {
  border-radius: 5px;
}

.button--round-m {
  border-radius: 15px;
}

.button--round-l {
  border-radius: 40px;
}

/* Borders */
.button--border-thin {
  border: 1px solid;
}

.button--border-medium {
  border: 2px solid;
}

.button--border-thick {
  border: 3px solid;
}

注意这些class不是对所有的按钮效果都有意义。有些效果依赖于使用元素的伪元素,例如使用伪元素来制作边框动画。

应用举例

下面来看一个”Itzel”效果的例子: