CSS矩形按钮和它里面的文字

Question

我需要创建这种类型的形状，绿色部分是一个按钮。 此设计仅适用于智能手机，矩形必须覆盖整个屏幕宽度。

Answer 1

也许试试这个。希望它可以帮助你。

注意：如果使用锚标记，只需更改按钮的元素。

.placeholder-box { 
 
    position: relative; 
 
    display: block; 
 
    width: 300px; 
 
    min-height: 150px; 
 
    margin-top: 50px; 
 
    padding: 30px; 
 
    border: 1px solid #888; 
 
    border-radius: 10px; 
 
    box-sizing: border-box; 
 
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.25); 
 
} 
 

 
.placeholder-box p { 
 
    text-align: center; 
 
    margin: 0 0 15px; 
 
} 
 

 
.placeholder-box ul { 
 
    margin: 0; 
 
} 
 

 
/* Button */ 
 

 
button { 
 
display: block; 
 
border: solid white; 
 
border-width: 0 10px; 
 
border-radius: 0; 
 
background: green; 
 
color: white; 
 
font-size: 18px; 
 
margin: -60px auto 15px; 
 
padding: 15px; 
 
}

<div class="placeholder-box"> 
 
    <button type="button"> Button Text Here </button> 
 
    <p>Nunc condimentum mauris elit</p> 
 
    <ul> 
 
    <li>Duis quis eros felis</li> 
 
    <li>Nulla facilisi</li> 
 
    </ul> 
 
</div>

Answer 2

<div style="padding:100px;" align="center"> 
    <a style=" background-color:#01B901;background-color: #01B901;padding: 50px;color: white;padding-top: 20px;padding-bottom: 20px;">hello btn</a> 
    </div> 

这是什么ü婉？