Parts
<div class="simpleButton">
<a href="#">詳細はこちら</a>
</div>
.simpleButton {
position: relative;
display: inline-block;
}
.simpleButton::before {
content: "";
width: 0.4em;
height: 0.8em;
display: block;
background: url("/img/icon/angle-right.svg") no-repeat center center;
background-size: 100% auto;
position: absolute;
top: 50%;
left: 50%;
margin-top: -0.4em;
margin-left: 3.2em;
transition: 0.3s all ease;
}
.simpleButton:hover::before {
margin-left: 3.5em;
}
.simpleButton a {
display: inline-block;
line-height: 1.4em;
padding: 0.8em 2.5em 0.8em 1.8em;
position: relative;
border: #000 solid 1px;
}
.simpleButton a::before {
content: "";
border: #000 solid 1px;
position: absolute;
top: 1px;
left: 1px;
width: calc(100% - 2px);
height: calc(100% - 2px);
}
.simpleButton a::after {
content: "";
border: #000 solid 1px;
position: absolute;
top: 3px;
left: 3px;
width: calc(100% - 6px);
height: calc(100% - 6px);
}
.simpleButton a:hover {
color: #666;
}
.simpleButton {
position: relative;
display: inline-block;
&::before {
content: "";
width: 0.4em;
height: 0.8em;
display: block;
background: url("/img/icon/angle-right.svg") no-repeat center center;
background-size: 100% auto;
position: absolute;
top: 50%;
left: 50%;
margin-top: -0.4em;
margin-left: 3.2em;
transition: 0.3s all ease;
}
&:hover{
&::before {
margin-left: 3.5em;
}
}
a{
display: inline-block;
line-height: 1.4em;
padding: 0.8em 2.5em 0.8em 1.8em;
position: relative;
border: #000 solid 1px;
&::before {
content: "";
border: #000 solid 1px;
position: absolute;
top: 1px;
left: 1px;
width: calc(100% - 2px);
height: calc(100% - 2px);
}
&::after {
content: "";
border: #000 solid 1px;
position: absolute;
top: 3px;
left: 3px;
width: calc(100% - 6px);
height: calc(100% - 6px);
}
&:hover{
color: #666;
}
}
}