body {
font-family: arial, sans-serif; /* 设置全局字体 */
}
/* 通用按钮样式 */
.button-base {
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none; /* 移除下划线 */
display: inline-block; /* 使元素可以设置宽度、高度，并与其他元素同行 */
font-size: 16px;
margin: 4px 2px;
cursor: pointer; /* 鼠标悬停时显示手型光标 */
/* 注意：这里没有直接设置背景色，因为会由具体的button1/button2类覆盖 */
}
/* 第一个按钮的特定样式 */
.button1 {
background-color: #E44040;
border-radius: 2px;
}
/* 第二个按钮的特定样式 */
.button2 {
/* 对于图片按钮，背景和边框可能需要特殊处理 */
border-radius: 12px;
/* 如果是图片按钮，可能不需要背景色，或者设置为透明 */
background: transparent; /* 确保背景透明，以便图片显示 */
padding: 0; /* 图片按钮通常不需要内边距，图片本身控制大小 */
}
/* 确保a标签内的div能撑开并应用样式 */
a .button-base {
display: inline-block; /* 或者 block，取决于布局需求 */
/* 继承并覆盖其他样式 */
}登录后复制
<body style="font-family: arial">
<p>点击下方按钮前往 YouTube</p>
<div>
<a href="https://www.youtube.com/" target="_blank" class="button-link">
<div class="button-base button1">YouTube</div>
</a>
</div>
<div>
<p>点击下方按钮前往 Reddit</p>
<a href="https://www.reddit.com/" target="_blank" class="button-link">
<div class="button-base button2">
@@##@@
</div>
</a>
</div>
</body>登录后复制
广告
221
收藏
