https://store.tsite.jp/ginza/4th-anniversary/
デザインとコーディングを担当しました。
紹介したい商品が多いから、スワイプで動くスライダーで
分野ごとに10個くらい紹介したいとのオーダーでした。
以前から予告していた通り、細い線多めのデザインにして
蔦屋書店らしさを意識したモノクロームに。
スライドはマウスオーバーで影が付いてくるエフェクトをつけました。
さりげなーく、主張。
デザインを考えるのが楽しいサイトでした。
クライアントが協力的だったので特に楽しく感じました！
こういう案件がいっぱいあったらいいなー！
こんにちは。ささめまです。
モードとかシンプルとかオシャレという言葉が似合うサイトに使いたいホバーエフェクトをご紹介します。
＼ コピペでそのまま使えます ／
demo
code
<a href="#" class="button_link">button</a>.button_link {
width: 280px;
color: #81d8d0;
font-weight: 600;
text-align: center;
text-decoration: none;
border: 2px solid #81d8d0;
background: transparent;
display:block;
position: relative;
transition:all 0.3s ease-in-out;
}
.button_link:before,
.button_link:after {
content: '';
width: 18px;
height: 18px;
border-color: #81d8d0;
box-sizing: border-box;
border-style :solid;
display: block;
position: absolute;
transition: all 0.3s ease-in-out;
}
.button_link:before {
top: -6px;
left: -6px;
border-width: 2px 0 0 2px;
z-index: 5;
}
.button_link:after {
bottom: -6px;
right: -6px;
border-width: 0 2px 2px 0;
}
.button_link:hover:before,
.button_link:hover:after {
width: calc(100% + 12px);
height: calc(100% + 12px);
border-color: #81d8d0;
}
.button_link:hover {
color: #fff;
background-color: #81d8d0;
border-color: #81d8d0;
}design
カギカッコのようにボタンを囲った線を、マウスオーバーでしゅっと伸ばすcssです。
オシャレ感ある。
フォントを変えるとモード感が出るので、遊びのあるサイトで使ってみたいなあと思ってます。
