20种酷炫的CSS3按钮样式和鼠标悬停效果

这是一个插件，它集成了20组不同的CSS3按钮样式和按钮鼠标悬停效果. 这20组CSS3按钮中的每组都有3个示例，每个示例都使用CSS3制作很酷的鼠标悬停. 这些按钮适用于各种场合，我相信总会有一个适合您.

按钮插件使用鼠标悬停作为按钮的触发事件. 一些按钮效果更适合于鼠标单击事件. 这些可以轻松修改和实施.

请注意，这些按钮效果仅适用于最新版本的现代浏览器. （移动）Safari浏览器仅支持其中一些.

按钮效果主要使用CSS过渡，但是某些效果也使用CSS来完成.

如何使用HTML结构

Vote                
              

常用按钮样式

以下是所有按钮的常规样式:

/* 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;
}               
                

在某些按钮效果中，一些额外的标签（例如跨度或多个跨度）将添加到按钮. 也有一些使用超链接的效果. 在这些效果中，您需要使用元素替换HTML元素并调整其样式.

下面是按钮的某些控件样式，例如边框，边框半径和大小.

/* 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;
}                  
                

请注意，这些类对所有按钮效果都没有意义. 有些效果依赖于使用元素的伪元素，例如使用伪元素制作边框.

应用示例

让我们看一个“ Itzel”效果的例子:

此效果在按钮的伪元素上使用剪切路径来切除边框的一部分. 该效果仅在支持clip-path属性的浏览器上有效，并且该效果在IE上不可见. 要在Firefox浏览器中查看效果，您需要在HTML中使用SVG来创建clipPath.

在这种效果下，按钮中存在一个裁剪区域，并且使用伪元素将其隐藏. 隐藏的方法是使用transform将其向下推到按钮下方，然后在鼠标悬停时使用另一个按钮. transform将其推回到其原始位置. 由于使用了overflow: hidden，因此在按钮区域之外不可见. 按钮上的小图标也以相同的方式制作. 鼠标悬停时，将文本的透明度设置为0，以便出售文本并显示一个小图标.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-309812-1.html