コピペで使える!おしゃれなボタンデザイン16選!


ページ遷移をさせたいときにボタンはすごく大事な要素だと思います。ここでは、そんなボタンの中でもおしゃれに作られたボタンデザインを厳選してご紹介します。

1.Happy switches

See the Pen Happy switches by Keith McKnight (@kmck) on CodePen.

2.Toggle

See the Pen Toggle by Scott Kellum (@scottkellum) on CodePen.

3.Rogie 👑 About Box

これは、ボタンを押して開いて綺麗でクールな汎用性あるデザインですね!

See the Pen Rogie 👑 About Box by Dronca Raul (@rauldronca) on CodePen.

4.CSS3 Checkbox Styles

See the Pen CSS3 Checkbox Styles by Brad Bodine (@bbodine1) on CodePen.

5.SVG Filters and CSS3 Transforms in Service of Image Unification

See the Pen SVG Filters and CSS3 Transforms in Service of Image Unification by TD (@roonroon) on CodePen.

6.CSS arrow down bouncing

ボタンではないが思わず押したくなるような動きをしていますね!

See the Pen CSS arrow down bouncing by dodozhang21 (@dodozhang21) on CodePen.

7.Pure CSS toggle buttons

Pugで書かれているので動くか試していないです。

See the Pen Pure CSS toggle buttons by Mauricio Allende (@mallendeo) on CodePen.

8.SVG CSS3 Menu / Burger Button

ボタンをクリックするとハンバーガーメニューになります!おしゃれな動きで、コピペして動きます!

See the Pen SVG CSS3 Menu / Burger Button by Kyle Henwood (@kyleHenwood) on CodePen.

9.Blackout

これはクリックすると面白いですね!!たくさんのアニメーションが用意されています。

See the Pen Blackout by Ee Venn Soh (@vennsoh) on CodePen.

10.Pure Css “day and night” toggle

コピペで動きます。コードは複雑なので汎用性は低いかもしれないですね。

See the Pen Pure Css “day and night” toggle by Benjamin Réthoré (@bnthor) on CodePen.

11.A bunch of funky CSS3 Toggle Buttons

リアルな電源ボタンがたくさんありますね!こんなデザインなら思わず押して見たくなるかも!コピペで動きます。

See the Pen A bunch of funky CSS3 Toggle Buttons by Ashley Nolan (@ashleynolan) on CodePen.

12.A bunch of funky CSS3 Toggle Buttons

素敵なUIのボタンがたくさんです!コピペで動きます。

See the Pen Pure CSS Toggles by Rafael González (@rgg) on CodePen.

13.A bunch of funky CSS3 Toggle Buttons

ボタンのデザインは素敵ですが、動きは特にありませんね。コピペで動きます。

See the Pen Dark Ui elements by Pfalzgraf Gyula (@wallas) on CodePen.

14.Cool Buttons

様々な色、サイズのボタンが用意されています。コードを見ると簡単なので自分で色々編集もできそうですね。コピペで動きます。

See the Pen Cool Buttons by Felipe Marcos (@FelipeMarcos) on CodePen.

15.Cool Buttons

シンプルでおしゃれなボタンです!コピペで再現できます。

See the Pen Switches by Billy Crist (@billyysea) on CodePen.

16.Ladda

押した後に少しLoadingのデザインとなるのでSubmitボタンに最適ですね!コピペで再現できます。

See the Pen Ladda by Hakim El Hattab (@hakimel) on CodePen.

あわせて読みたい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です