侧边栏添加一个漂亮的渐变按钮

2023年11月28日 4,640

在小工具中添加 html 工具

填写

<button>
<a href=”https://ccbiji.cc/520.html” style=” color: #fff; text-decoration: none;”>按钮名字</a>
</button>

在自定义CSS 里面添加下面的样式

button {
background-color: #444141;
border-radius: 4px;
color: #fff;
cursor: pointer;
padding: 8px 20px;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
border: none;
}

button:hover {
background-image: linear-gradient(90deg, #53cbef 0%, #dcc66c 50%, #ffa3b6 75%, #53cbef 100%);
animation: slidernbw 5s linear infinite;
color: #000;
}

@keyframes slidernbw {
to {
background-position: 20vw;
}
}

效果：

Comments | 0条评论