子比主题 – 文章顶部添加按钮样式
这是一款文章顶部添加按钮样式，当用户访问文章的时候可以看到这四个按钮，按钮的样式也非常简约，这个按钮也非常的实用，喜欢的自行部署！代码部署
将下面的代码放到：子比主题–>>文章&列表–>>文章页面–>>文章插入内容（前后自己选择吧）
<style>
.hoayue_button_container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
padding: 20px 0;
width: 100%;
box-sizing: border-box;
}
.hoayue_button_block {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
color: #333;
text-align: center;
user-select: none;
background: #f2f2f2;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid #ddd;
text-decoration: none;
gap: 6px;
text-decoration: none;
flex: 1 0 22%;
box-sizing: border-box;
}
.hoayue_button_block:hover {
background: #e0e0e0;
transform: translateY(-2px);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
.hoayue_button_icon {
width: 18px;
height: 18px;
}
@media (min-width: 1025px) {
.hoayue_button_container {
justify-content: space-between;
}
.hoayue_button_block {
flex: 1 0 calc(25% - 20px);
max-width: 23%;
font-size: 14px;
padding: 6px 14px;
}
.hoayue_button_icon {
width: 16px;
height: 16px;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.hoayue_button_block {
flex: 1 0 calc(25% - 20px);
max-width: 23%;
font-size: 16px;
padding: 8px 16px;
}
.hoayue_button_icon {
width: 18px;
height: 18px;
}
}
@media (max-width: 767px) {
.hoayue_button_block {
flex: 1 0 calc(50% - 10px);
font-size: 14px;
padding: 8px 14px;
}
.hoayue_button_icon {
width: 16px;
height: 16px;
}
}
</style>
<div class="hoayue_button_container">
<a href="/" class="hoayue_button_block" target="_blank" rel="noopener noreferrer">
<!-- 图标替换为图片 -->
加入QQ群
</a>
<a href="/" class="hoayue_button_block" target="_blank" rel="noopener noreferrer">
<!-- 图标替换为图片 -->
关注微信公众号
</a>
<a href="/" class="hoayue_button_block" target="_blank" rel="noopener noreferrer">
<!-- 联系我们图标 -->
联系我们
</a>
<a href="/" class="hoayue_button_block" target="_blank" rel="noopener noreferrer">
<!-- 图标替换为图片 -->
请求更新
</a>
</div>
页:
[1]