これなら簡単！CSSのみで、ボタンやアイコンに気持ちいいさまざまなアニメーションを加える -UI interactions

サイト構築 -CSS

Post on:2019年9月13日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを加えるスタイルシートを紹介します。HTMLはbutton要素だけのシンプルな構成で、classを与えるだけで簡単に利用できます。

サイトのキャプチャ

UI interactions
UI interactions -GitHub

UI interactionsは、CSSのみでUIにインタラクションを加えるスタイルシートです。MITライセンスで、個人でも商用のプロジェクトでも無料で利用できます。

UI interactionsの使い方

すべてのコンポーネントには、デフォルトとアクティブの2つの状態があります。状態の切り替えは、is-activeのclassに基づいて発生します。

HTML

HTMLは、button要素にclassを与えるだけでのシンプルな構成です。

<button class="ui-arrow-01"></button>

1	<button class="ui-arrow-01"></button>

CSS

CSSは、コピペで簡単に利用できます。

.ui-arrow-01 {
  position: relative;
  width: 30px;
  height: 30px;
  border: none;
  background-color: transparent;
}
.ui-arrow-01:before,
.ui-arrow-01:after {
  content: '';
  background-color: #2980b9;
  position: absolute;
  top: 50%;
  width: 1px;
  height: calc(70% - 1px);
  margin-top: -35%;
}
.ui-arrow-01:before {
  left: 50%;
  margin-left: -25%;
  transform: rotate(-45deg);
}
.ui-arrow-01:after {
  right: 50%;
  margin-right: -25%;
  transform: rotate(45deg);
}
.ui-arrow-01:before,
.ui-arrow-01:after {
  transition: transform 0.34s ease;
}
.ui-arrow-01.is-active:before {
  transform: rotate(45deg);
}
.ui-arrow-01.is-active:after {
  transform: rotate(-45deg);
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

.ui-arrow-01 {

position: relative;

width: 30px;

height: 30px;

border: none;

background-color: transparent;

}

.ui-arrow-01:before,

.ui-arrow-01:after {

content: '';

background-color: #2980b9;

position: absolute;

top: 50%;

width: 1px;

height: calc(70% - 1px);

margin-top: -35%;

}

.ui-arrow-01:before {

left: 50%;

margin-left: -25%;

transform: rotate(-45deg);

}

.ui-arrow-01:after {

right: 50%;

margin-right: -25%;

transform: rotate(45deg);

}

.ui-arrow-01:before,

.ui-arrow-01:after {

transition: transform 0.34s ease;

}

.ui-arrow-01.is-active:before {

transform: rotate(45deg);

}

.ui-arrow-01.is-active:after {

transform: rotate(-45deg);

}

UI interactionsのデモ

デモでは、ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを楽しめます。

まずは、アローの向きを上下に変えるインタラクション。

サイトのキャプチャ

UI interactions: アローのインタラクション

ハンバーガーメニューは、6種類のインタラクションが用意されています。

サイトのキャプチャ

UI interactions: ハンバーガーメニューのインタラクション

プラス「+」アイコンのインタラクション。

サイトのキャプチャ

UI interactions: プラスアイコンのインタラクション

ボタンをクリック・タップすると、ローディングを表示するインタラクション。

サイトのキャプチャ

UI interactions: ローディングボタンのインタラクション

ボタンのオン・オフを切り替えるトグルのインタラクション。

サイトのキャプチャ

UI interactions: トグルボタンのインタラクション

トグルのインタラクションは、15種類用意されています。

サイトのキャプチャ

UI interactions: トグルボタンのインタラクション

sponsors

Related Posts

©2024 coliss