CSS和按钮设计
CSS和按钮设计
提问于 2018-06-07 07:35:28
请帮助我如何创建一个像这样的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>
回答 4
Stack Overflow用户
发布于 2018-06-07 07:53:29
如果不能更改标记，css唯一的解决方案是使用伪元素。
.btn {
border-radius: 15px;
font-family: Arial;
color: #ffffff;
font-size: 2em;
background: lighgrey;
padding: 40px 20px;
text-decoration: none;
border: 3px solid black;
}
.btn:after {
content: 'New!';
border: 3px solid black;
padding: 15px;
border-radius: 15px;
background: #00c8ff;
margin: 10px;
}<button class="btn">Click Me Now!</button>
Stack Overflow用户
发布于 2018-06-07 08:23:18
您可以通过使用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>
Stack Overflow用户
发布于 2018-06-07 07:49:37
您的css将是：
.insideText{
font-size: 0.50em;
float: right;
margin-left: 10px;
color: orange;
border: 1px solid;
margin-top: -1;
}和你的Html：
<div id="container">
<button class="btn"><p class="insideText">Some other text</p>Some Text</button>
</div>您的.btn css将保持不变。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50731067
复制相关文章
相似问题
腾讯云开发者
