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

PetitQ 按钮图标 2019-1-20 1.86K 0 0

这是一款集合 20 组不同 CSS3 按钮样式和按钮鼠标滑过特效的插件。这 20 组 css3 按钮每一组都有 3 种示例，每一个示例都使用 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"效果的例子：Itzel 按钮样式和 CSS3 动画效果，这个效果在按钮的伪元素上使用 clip-path 来剪切掉一部分边框，这个效果只能工作在支持 clip-path 属性的浏览器上，IE 浏览器上看不到效果。要在 Firefox 浏览器中看到效果，需要在 HTML 中使用 SVG 来制作 clipPath。在这个效果中，在按钮中有一个裁剪区域，使用伪元素来将之隐藏起来，隐藏的方法是使用 transform 来将它往下推到按钮的下面，然后在鼠标滑过时使用另外一个 transform 将它推会原来的位置。因为使用了 overflow:hidden，因此在按钮区域外是看不见它的。按钮上的小图标也使用相同的方法来制作。在鼠标滑过的时候，设置文字的透明度为 0，以使文字销售，显示出小图标。

```
/* Itzel */
```
```
.button--itzel {
```
```
  border: none;
```
```
  padding: 0px;
```
```
  overflow: hidden;
```
```
  width: 255px;
```
```
}
```
```
 
```
```
.button--itzel::before {
```
```
  content: '';
```
```
  position: absolute;
```
```
  top: 0;
```
```
  left: 0;
```
```
  width: 100%;
```
```
  height: 100%;
```
```
  border: 2px solid;
```
```
  border-radius: inherit;
```

  -webkit-clip-path: polygon(0% 0%, 0% 100%, 35% 100%, 35% 60%, 65% 60%, 65% 100%, 100% 100%, 100% 0%);

  clip-path: url(../index.html#clipBox);

  transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0);

```
  transform-origin: 50% 100%;
```
```
}
```
```
 
```

.button--itzel.button--border-thin::before {

```
  border: 1px solid;
```

  transform: translate3d(0, 100%, 0) translate3d(0, -1px, 0);

```
}
```
```
 
```

.button--itzel.button--border-thick::before {

```
  border: 3px solid;
```

  transform: translate3d(0, 100%, 0) translate3d(0, -3px, 0);

```
}
```
```
 
```
```
.button--itzel::before, 
```
```
.button--itzel .button__icon {
```
```
  transition: transform 0.3s;
```

  transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);

```
}
```
```
 
```
```
.button--itzel .button__icon {
```
```
  position: absolute;
```
```
  top: 100%;
```
```
  left: 50%;
```
```
  padding: 20px;
```
```
  font-size: 20px;
```
```
  transform: translate3d(-50%, 0, 0);
```
```
}
```
```
 
```
```
.button--itzel > span {
```
```
  display: block;
```
```
  padding: 20px;
```

  transition: transform 0.3s, opacity 0.3s;

```
  transition-delay: 0.3s;
```
```
}
```
```
 
```
```
.button--itzel:hover::before {
```
```
  transform: translate3d(0, 0, 0);
```
```
}
```
```
 
```
```
.button--itzel:hover .button__icon {
```
```
  transition-delay: 0.1s;
```

  transform: translate3d(-50%, -100%, 0);

```
}
```
```
 
```
```
.button--itzel:hover > span {
```
```
  opacity: 0;
```
```
  transform: translate3d(0, -50%, 0);
```
```
  transition-delay: 0s;
```
```
}
```

以上就是这个按钮效果的全部代码。在(Mobile) Safari 浏览器中，这些按钮动画效果会有许多问题，特别是 border-radius 和 overflow hidden 的问题。在这个浏览器中，伪元素视乎不能解析 overflow：hidden（特别是在 transition 的时候）。还有一个 gap 问题，解决方案是使用 -webkit-backface-visibility: hidden。