HTML Box - make it look like another website - html

Question

In this code -
<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';">Click Here to Get Thrive Themes</span>
</td>
</tr>
</table>
</div>
I want "Click Here to Get Thrive Themes" box to look like the box on this webpage below-
http://zacjohnson.com/how-will-you-stand-out-from-the-crowd/
What changes I require to make?

Answer 1

I have modified your HTML and CSS a bit to replicate the button in that website you have posted for you.
You can adjust the CSS to suit your exact needs
#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">Click Here to Get Thrive Themes
</button>
</td>
</tr>
</table>
</div>