ブロック要素とインライン要素の特徴を併せ持つインラインブロック要素というものがあります。

インラインブロック要素はインライン要素と同様に横に並びますが、ブロック要素のように幅や高さをもちます。

<a>タグは初期状態でインライン要素になっていますが、displayプロパティを使うと、インラインブロック要素に変更することができます。

displayプロパティはblock（ブロック要素）, inline-block（インラインブロック要素）, inline（インライン要素）を指定することができます。

<div class="btn-wrapper">
  <a href="#" class="btn signup">新規登録はこちら</a>
  <p>or sign up with</p>
           
  <a href="#" class="btn facebook">Facebookで登録</a>
  <a href="#" class="btn twitter">Twitterで登録</a>
</div>

.btn {
  padding: 8px 24px;
  color: white;
  display: inline-block;
  opacity: 0.8;
}

.signup {
  background-color: #239b76;
}

.facebook {
  background-color: #3b5998;
  margin-right: 10px;
}

.twitter {
  background-color: #55acee;
}

.btn-wrapper {
  margin: 20px 0;
}

.btn-wrapper p {
  margin: 10px 0;
}