前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >分享一组好看的按钮样式(纯CSS)

分享一组好看的按钮样式(纯CSS)

作者头像
小何.
发布2023-03-09 19:49:40
1.8K0
发布2023-03-09 19:49:40
举报
文章被收录于专栏:小何の个人博客

今日折腾主题标签云功能,研究了半天后.. 发现是多余的(用不上) 但是感觉还不错,按钮如下: 我是按钮我是按钮我是按钮我是按钮我是按钮我是按钮我是按钮我是按钮

CSS
代码语言:javascript
复制
/*侧栏标签云*/
.biaoq1 {margin-bottom:3px; margin-right:1px; color:rgb(255, 255, 255);font-size:12px;padding-top:3px;padding-bottom:3px;padding-left:6px;padding-right:6px;border-width:1px;border-color:#b57dff;border-style:solid;border-radius:1px;background-color:#b57dff;}
.biaoq1:hover{ color:#ffffff;background-color:#888888;border-color:#505050;}
 
.biaoq2 {margin-bottom:3px; margin-right:1px; color:rgb(255, 255, 255);font-size:12px;padding-top:3px;padding-bottom:3px;padding-left:6px;padding-right:6px;border-width:1px;border-color:#465efb;border-style:solid;border-radius:1px;background-color:#465efb;}
.biaoq2:hover{ color:#ffffff;background-color:#888888;border-color:#505050;}
 
.biaoq3 {margin-bottom:3px; margin-right:1px; color:rgb(255, 255, 255);font-size:12px;padding-top:3px;padding-bottom:3px;padding-left:6px;padding-right:6px;border-width:1px;border-color:#f9bb3c;border-style:solid;border-radius:1px;background-color:#f9bb3c;}
.biaoq3:hover{ color:#ffffff;background-color:#888888;border-color:#505050;}

.biaoq4 {margin-bottom:3px; margin-right:1px; color:rgb(255, 255, 255);font-size:12px;padding-top:3px;padding-bottom:3px;padding-left:6px;padding-right:6px;border-width:1px;border-color:#f55555;border-style:solid;border-radius:1px;background-color:#f55555;}
.biaoq4:hover{ color:#ffffff;background-color:#888888;border-color:#505050;}

.biaoq5 {margin-bottom:3px; margin-right:1px; color:rgb(255, 255, 255);font-size:12px;padding-top:3px;padding-bottom:3px;padding-left:6px;padding-right:6px;border-width:1px;border-color:#f6969a;border-style:solid;border-radius:1px;background-color:#f6969a;}
.biaoq5:hover{ color:#ffffff;background-color:#888888;border-color:#505050;}
   
.biaoq6 {margin-bottom:3px; margin-right:1px; color:rgb(255, 255, 255);font-size:12px;padding-top:3px;padding-bottom:3px;padding-left:6px;padding-right:6px;border-width:1px;border-color:#e92b6f;border-style:solid;border-radius:1px;background-color:#e92b6f;}
.biaoq6:hover{ color:#ffffff;background-color:#888888;border-color:#505050;}

.biaoq7 {margin-bottom:3px; margin-right:1px; color:rgb(255, 255, 255);font-size:12px;padding-top:3px;padding-bottom:3px;padding-left:6px;padding-right:6px;border-width:1px;border-color:#28c76f;border-style:solid;border-radius:1px;background-color:#28c76f;}
.biaoq7:hover{ color:#ffffff;background-color:#888888;border-color:#505050;}

.biaoq8 {margin-bottom:3px; margin-right:1px; color:rgb(255, 255, 255);font-size:12px;padding-top:3px;padding-bottom:3px;padding-left:6px;padding-right:6px;border-width:1px;border-color:#3fa5ff;border-style:solid;border-radius:1px;background-color:#3fa5ff;}
.biaoq8:hover{ color:#ffffff;background-color:#888888;border-color:#505050;}
/*侧栏标签云*/
调用示例
代码语言:javascript
复制
<button class="biaoq1">我是按钮</button>
<button class="biaoq2">我是按钮</button>
<button class="biaoq3">我是按钮</button>
<button class="biaoq4">我是按钮</button>
<button class="biaoq5">我是按钮</button>
<button class="biaoq6">我是按钮</button>
<button class="biaoq7">我是按钮</button>
<button class="biaoq8">我是按钮</button>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023年03月08日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • CSS
  • 调用示例
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档