分享一个好看的按钮代码

吃猫的鱼
2022-07-12 / 15 评论 / 810 阅读 / 正在检测是否收录...

封面3s.png
今天在网上看到一个十分好看的按钮代码,发到博客记录一下。

首先看一下样式

K1TC91}DQISP0.png

下面分享代码

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>

4

评论 (15)

取消
  1. 头像
    66666
    Android · Google Chrome

    不是我爱熬夜,而是黑夜需要我这颗星

    回复
  2. 头像
    啦啦啦
    Windows 10 · Google Chrome

    画图

    回复
  3. 头像
    青柠
    Android · QQ Browser

    看看

    回复
  4. 头像
    QQ
    Android · Google Chrome

    不错的代码

    回复
  5. 头像
    好看,拿了
    Windows 10 · Google Chrome

    好看,拿了

    回复
友情链接 文章阅读: 网站地图