button

ポートフォリオ背景画像

button

Logo design / Web design / Frontend

button

自主制作で作りました。日常から自主制作なり、仕事なり、授業なりでサイトのボタンアニメーションを作ることが多いので、そのアニメーションを紹介するサイトを作ろうと思って作りました。

web site
ポートフォリオ写真

まず、サイトのボタンの色は色んなデザインのサイトへ使われる事を想定して、1色、1つの形ではなく、別々の4色と丸い形と四角い形、線で構成しました。そのため、ロゴマークは使っている4色とhoverを表すカーソルを使いました。全体的にポップな印象にしています。

ポートフォリオ写真
ポートフォリオ写真

ボタンを押すとポップアップでどう実装しているのかというのが見られるようにしています。ボタンのサイトということもあって、moreというボタンは普通のボタンじゃなくそうと思い、常に回転するようにして、hoverすると縮んで早く回転するようにしています。また色もhoverすると4色のどれかの色になるようにしています。

(ちなみに、ヘッダーのロゴをホバーすると跳ねます)