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

首页 / 杂七杂八 / 正文

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

CSS
/*侧栏标签云*/
.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;}
/*侧栏标签云*/
调用示例
<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>
评论区
头像