HTML盒 - 使它看起來像另一個網站

Question

在這段代碼 -

<style> 
#boxx{ 
box-shadow: 0 0 5px 0 rgba(0,0,0,0.3); 
border: 6px solid #fff; 
background-color: #0e5b93; 
min-height: 345px; 
max-width: 745 px; 
padding-left: 15px; 
padding-right: 15px; 
} 
#ter { 
text-align: center; 
} 

</style> 
<div id="boxx"> 
<table> 
<tr> 
<td width="500px"> 
<p style="font-size: 28px; color: #FFF; padding-top: 27px;">Start earning money with your own blog like this one?</p> 
<br> 
<p style="font-size: 18px; color: #FFF;">This website was created with Thrive Themes and WordPress. Using the suite of tools provided by Thrive Themes is the fastest way for you to create your own website or blog that is <b>fully optimized for maximum conversions</b>. Click the button to get started.</p> 

</td> 

<td width="251"> 
<span id="ter" style="width:500px;background:white" onmouseover="this.style.background='gray';" onmouseout="this.style.background='white';"><a href="https://www.goog.ecom">Click Here to Get Thrive Themes</a></span> 
</td> 
</tr> 
</table> 
</div> 

我想「點擊這裏獲取茁壯成長主題」框看起來像本網頁框如下─

http://zacjohnson.com/how-will-you-stand-out-from-the-crowd/ 

我需要做些什麼改變？

Answer 1

我修改了您的HTML和CSS以複製您發佈給您的那個網站中的按鈕。

您可以調整CSS，以滿足您的需求

#boxx { 
 
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3); 
 
    border: 6px solid #fff; 
 
    background-color: #0e5b93; 
 
    min-height: 345px; 
 
    max-width: 745 px; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
} 
 
a { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 
button { 
 
    cursor: pointer; 
 
    text-align: center; 
 
    border-radius: 8px; 
 
    border: none; 
 
    background-color: #124463; 
 
    text-align: center; 
 
    -webkit-box-shadow: 0px 2px 0px black; 
 
    -moz-box-shadow: 0px 2px 0px black; 
 
    box-shadow: 0px 2px 0px black; 
 
    width: 150px; 
 
    height:80px; 
 
    font-weight: 500; 
 
    margin-top:150px; 
 
    margin-left:20px; 
 
    float: right; 
 
    font-size:14px; 
 
} 
 
button:hover { 
 
    opacity: 0.8; 
 
}

<div id="boxx"> 
 
    <table> 
 
    <tr> 
 
     <td width="500px"> 
 
     <p style="font-size: 28px; color: #FFF; padding-top: 27px;">Start earning money with your own blog like this one?</p> 
 

 
     <p style="font-size: 18px; color: #FFF;">This website was created with Thrive Themes and WordPress. Using the suite of tools provided by Thrive Themes is the fastest way for you to create your own website or blog that is <b>fully optimized for maximum conversions</b>. Click the button 
 
      to get started.</p> 
 
     </td> 
 
     
 
     <td> 
 
     <button id="ter"><a href="https://www.goog.ecom">Click Here to Get Thrive Themes</a> 
 
     </button> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>