今天在网上看到一个十分好看的按钮代码,发到博客记录一下。
首先看一下样式
下面分享代码
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>
不是我爱熬夜,而是黑夜需要我这颗星
看看
不错的代码
好看,拿了