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> 

這是什麼ü婉？