外部アイコンのようなボタンデザイン
通常
hover時
上記の外部アイコンみたいな、ボタンリンクをやります。
index.html
<p><a href="#" class="m-btn-external">外部アイコンみたいなボタン</a></p>
style.scss
.m-btn-external{
display: block;
margin: 0 auto;
padding: 10px;
max-width: 250px;
color: #000;
text-decoration: none;
text-align: center;
position: relative;
border: 1px solid #000;//①まず枠線
&:before,&:after{//疑似要素で外部アイコン風の線を表現
content: "";
display: inline-block;
position: absolute;
bottom: -7px;//②ボタンの右下に配置
right: -7px;//②ボタンの右下に配置
background: #111;
transition: all .5s ease;
}
&:before{
width: 100%;//③線の長さ
height: 1px;//④線の太さ
}
&:after{
width: 1px;//④線の太さ
height: 100%;//③先の長さ
}
&:hover{
&:before{//⑤hover時に線を短くしていき、ボタンだけにする
width: 0;
}
&:after{//⑤hover時に線を短くしていき、ボタンだけにする
height: 0;
}
}
}
動きが見せられないのですが、hover時はtransitionがかっているので、うざったい動きにならずにいいアクセントを出せるようになっています。
線の太さや色、配置場所を変更できますのでcssで設定できると表現の幅が広がるかと思います。