<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.