<p>▼btn01</p>
<a href="" class="btn01">hoverで文字色変更</a>

<p>▼btn02</p>
<a href="" class="btn02">hoverで背景色変更</a>

<p>▼btn03</p>
<a href="" class="btn03">hoverで下線が出る</a>

<p>▼btn04</p>
<a href="" class="btn04">hoverで枠が出る</a>

<p>▼btn05</p>
<a href="" class="btn05">hoverでちょっとずれる</a>

<p>▼btn06</p>
<a href="" class="btn06"><span>hoverでちょっとずれる(改)</span></a>
body{
  margin: 20px;
}
p{
  font-weight: bold;
  margin: 0 0 12px;
}
a{
  display: block;
  width: 230px;
  margin: 0 0 24px;
  text-decoration: none;
  transition: .2s;
}
span{
  transition: .2s;
}

.btn01{
  color: pink;
}
.btn01:hover{
  color: red;
}

.btn02{
  background: pink;
  text-align: center;
  padding: 10px 0;
  color: #fff;
}
.btn02:hover{
  background: brown;
}

.btn03:hover{
  text-decoration: underline;
}

.btn04{
  text-align: center;
  padding: 10px 0;
  color: pink;
  border: 1px solid transparent;
}
.btn04:hover{
  border: 1px solid pink;
}

.btn05{
  text-align: center;
  padding: 10px 0;
  color: #fff;
  background: pink;
  position: relative;
  top: 0;
  left: 0;
}
.btn05:hover{
  top: -5px;
  left: -5px;
}

.btn06{
  text-align: center;

  color: #fff;
 position: relative;
}
.btn06:before{
  content:"";
  width: 100%;
  height: 100%;
  background: brown;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.btn06 span{
  background: pink;
  position: relative;
  display: block;
  padding: 10px 0;
  top: 0;
  left: 0;
}
.btn06:hover span{
  top: -5px;
  left: -5px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.