こんにちは。ささめまです。
サイトがちょっと優雅な雰囲気になる、（でも簡単な）ボタンをご紹介します。
（以前制作した銀座 蔦屋書店2020年クリスマス特設サイトに使用したボタンです。）
＼ コピペでそのまま使えます ／
demo
code
<a href="#" class="button_link">button</a>.button_link {
width: 280px;
height: 40px;
color: #625941;
font-family: 游明朝, YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-weight: 600;
text-align: center;
text-decoration: none;
line-height: 35px;
background-color: transparent;
border: 2px solid #625941;
display: block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.button_link:hover {
color: #efece7;
text-decoration: none;
background: #625941;
}
design
ふぉん、と滑らかに色が変わるのが気持ちいいボタンです。
ゴールド寄りの色味も高級感があって気に入っています。
枠がやや太めなのも高級感を醸し出す要素です。
comment
持ち帰れる要素があれば是非制作にお役立てください！
