<section>
  <h2>見出し</h2>
  <p>文章文章文章文章文章文章文章文章文章文章</p>
  <p><a href="#">ボタン</a></p>
  <p>ボタンの後段落の文章。ボタンの後段落の文章。</p>
</section>
a {
  display: block;
  text-decoration: none;
  border-radius: 8px;
  background-color: #ff0055;
  color: #ffffff;
  padding: 10px;
  text-align: center;
  border-bottom: 6px solid #cc0055;
  box-shadow: 0px 2px 2px 2px #ccc;
}
a:hover {
  transform: translateY(6px);
  border-bottom: 0px none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.