I am looking to have the button and text aligned on the same line.
<div class="offers">
<div class="container" style="line-height: 300px; text-align: center;">
<h1>Enjoy our offers with your family <button class="offers-button"><a href="#">See all the benefits of therapies</a></button>
</div>
</div>
button {
background: transparent;
color: #666;
border: 1px solid #d4d4d4;
padding: 10px 20px;
margin: 0 10px 0 10px;
transition: border .3s ease-in;
}
button:hover {
border: 1px solid #909090;
padding: 10px 20px 10px 20px;
}
button a {
font-family: 'Raleway', sans-serif;
color: #666;
font-size: 14px;
}
.offers-button a {
font-family: 'Raleway', sans-serif;
color: #fff;
}
.offers-button:hover {
border: 1px solid #fff;
}
.offers {
width: 100%;
display: table;
height: 300px;
background:url(../img/back.jpg) center no-repeat;
}