html - CSS和按钮设计
问题描述
请帮助我如何使用 css/html 创建一个看起来像这样的按钮?
我目前有这个代码,但它只显示一个基本按钮。我需要New!
在图片中指示的框中添加文本。我需要一些关于 CSS 的帮助。我应该怎么办?
.btn {
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
background: #3498db;
padding: 5px 5px 5px 5px;
text-decoration: none;
}
<button class="btn">Click Me Now!</button>
解决方案
您可以使用 data 属性改进伪元素解决方案:
.btn {
border-radius: 15px;
color: #ffffff;
font-size:20px;
max-width:250px;
display:inline-flex;
vertical-align:top;
align-items:center;
background: grey;
padding: 10px 20px;
text-decoration: none;
border: 3px solid black;
}
.btn:after {
content: attr(data-text);
border: 3px solid black;
padding: 15px;
margin-left:5px;
border-radius: 15px;
background: #00c8ff;
}
<button data-text="first" class="btn">Click Me Now!</button>
<button data-text="second" class="btn">Click Me Now!</button>
推荐阅读
- react-native - React Native - 重定向到“主页”后显示启动画面
- android - Android VpnService 不允许自己
- r - 如何从原始数据集中计算样本数据集?
- python - 以节省内存的方式将加权边列表转换为邻接矩阵
- travis-ci - 电子邮件验证错误和未触发自动构建
- c# - Json 使用动态属性名称反序列化对象数组
- c++ - 找到您正在考虑的数字的程序无法正常运行,出了什么问题?
- javascript - V8 c++ - 无法反序列化 V8 快照 blob
- javascript - 如何使用jquery预填充字段
- django - 使用 Django 上传一个大的 csv 文件(100MB)需要多长时间?