分享一款好看的按钮代码

最近在做一个项目，需要用到按钮代码，我在网上找到一些实列资料，感觉都不是很符合我的标准，HHH...我决定动手DIY一下效果看着还不错！
今天趁着有空发一下成果，顺便谁一篇文章🧑‍💻

实践过程

按钮代码可以通过 HTML 和 CSS 实现，非常简单上手。

html代码

<button> 艾霂's Blog </button>

css代码

<style>
button {
 --green: #1BFD9C;
 font-size: 15px;
 padding: 0.7em 2.7em;
 letter-spacing: 0.06em;
 position: relative;
 font-family: inherit;
 border-radius: 0.6em;
 overflow: hidden;
 transition: all 0.3s;
 line-height: 1.4em;
 border: 2px solid var(--green);
 background: linear-gradient(to right, rgba(27, 253, 156, 0.1) 1%, transparent 40%,transparent 60% , rgba(27, 253, 156, 0.1) 100%);
 color: var(--green);
 box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.4), 0 0 9px 3px rgba(27, 253, 156, 0.1);
}
button:hover {
 color: #82ffc9;
 box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.6), 0 0 9px 3px rgba(27, 253, 156, 0.2);
}
button:before {
 content: "";
 position: absolute;
 left: -4em;
 width: 4em;
 height: 100%;
 top: 0;
 transition: transform .4s ease-in-out;
 background: linear-gradient(to right, transparent 1%, rgba(27, 253, 156, 0.1) 40%,rgba(27, 253, 156, 0.1) 60% , transparent 100%);
}
button:hover:before {
 transform: translateX(19em);
}
</style>

实列展示

艾霂's Blog