大家好,我是前端实验室的大师兄！
我们推荐过很多好用的组件库，比如阿里的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;
}
而且里面涉及的动画效果是一些很好的学习教材
gitHub:https://github.com/ui-buttons/core 官网：https://ui-buttons.web.app/
最后
欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~
进群方式：在下方公众号后台，回复 111 ，按提示操作即可进群。
如果该文章对你有帮助，那么就点击右下角的 [点赞]「在看」，给一个小小的鼓励吧~
