这100个按钮，我就不信没有适合你的！

程序员老鱼

发布于 2022-12-02 11:10:58

4880

发布于 2022-12-02 11:10:58

文章被收录于专栏：前端实验室

大家好,我是前端实验室的大师兄！

我们推荐过很多好用的组件库，比如阿里的antdev,京东的NutUI,国外的daisy-UI等等等等，这些组件库不仅实用而且内容也很丰富，不仅有“按钮”，还有“弹窗”，“面包屑”，“图标”，“步骤条”等等

大多数的开源组件库做的很全面，但是却缺少个性化。就拿按钮来说吧，都是一些常用的样式和功能

如果你想添加一些动效，或者修改一些样式，想要变得更加炫酷，更加有趣，这些组件库的 按钮 就无法满足了

所以今天大师兄就给大家推荐一个炫酷有趣的按钮组件库，这个组件库就只有按钮这一个组件,而且多达100个，每个按钮的样式和动效都不一样，用这个组件库来学习动画，也很不错呦~

UI Buttons

100个现代CSS按钮。包含你能想象到的每一种风格。

100个样式

这个组件库里有100按钮，每一个的样式和动效都不一样，点击链接就能查看详细的代码

使用

每个都有提供独立的html结构和css样式代码，直接复制粘贴就能使用

接下来我们就用这个来改造一下，直接复制粘贴到代码里，改巴改巴就能用

<button class="btn-43"> 
  <span class="old">前端</span>
  <span class="new">实验室</span>
</button>

.btn-43,
.btn-43 *,
.btn-43 :after,
.btn-43 :before,
.btn-43:after,
.btn-43:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-43 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-43:disabled {
  cursor: default;
}
.btn-43:-moz-focusring {
  outline: auto;
}
.btn-43 svg {
  display: block;
  vertical-align: middle;
}
.btn-43 [hidden] {
  display: none;
}
.btn-43 {
  border: 1px solid;
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  padding: 20px 60px;
  position: relative;
  text-transform: uppercase;
}
.btn-43 .new,
.btn-43 .old {
  font-weight: 900;
}
.btn-43 .new {
  background: #fff;
  color: #000;
  content: "";
  display: grid;
  inset: 0;
  opacity: 0;
  place-items: center;
  position: absolute;
  transform: rotate(90deg) translateY(100%);
  transform-origin: bottom left;
  transition: transform 0.2s, opacity 0.2s;
}
.btn-43:hover .new {
  opacity: 1;
  transform: rotate(0deg) translateY(0);
}
.btn-43 .old {
  transition: opacity 0.2s;
}
.btn-43:hover .old {
  opacity: 0;
}

而且里面涉及的动画效果是一些很好的学习教材