请帮助我如何创建一个像这样的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>
发布于 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>
发布于 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>
发布于 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将保持不变。
https://stackoverflow.com/questions/50731067
复制相似问题