こんにちは。ささめまです。
線との組み合わせボタンがやっぱりなんとなく好きで、
また使いたいので作り方の備忘録です。
＼ コピペでそのまま使えます ／
demo
html
<a href="#" class="button_link">button</a>css
.button_link {
width: 280px;
height: 40px;
color: #ffffff;
font-weight: 700;
text-align: center;
text-decoration: none;
background-color: #bdefea;
display: block;
transition: 0.3s;
}
.button_link::before {
content: '';
width: 100%;
height: 100%;
top: -5px;
left: -5px;
border: 2px solid #81d8d0;
position: absolute;
transition: 0.2s;
}
.button_link:hover::before {
top: 0;
left: 0;
}
.button_link:hover {
color: #ffffff;
text-decoration: none;
background-color: #81d8d0;
}design
ファッション系のサイトで使われているイメージがあります。
幾何学模様とかと相性が良いのではないでしょうか。
その時は:hover時のbackground-colorは変えないとか
線より薄めの色だとかわいい感じに仕上がると思います。
ではでは
