今天在网上看到一个十分好看的按钮代码，发到博客记录一下。

首先看一下样式

下面分享代码

html代码如下

<button> 吃猫的鱼www.fish9.cn
    </button>

css代码如下

 <style>
/* 吃猫的鱼www.fish9.cn*/
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);
}
/* 吃猫的鱼www.fish9.cn*/
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);
}
/* 吃猫的鱼www.fish9.cn*/
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%);
}
/* 吃猫的鱼www.fish9.cn*/
button:hover:before {
 transform: translateX(19em);
}
</style>