読者です 読者をやめる 読者になる 読者になる

保育士していた学生が起業してビジネスの成功者になるまで...

保育士の働く環境、学童と児童館で教育を受けれられる環境を作るために活動。ビジョンは「子どもに人生の糧をつくる」である。ここではそんな活動の経緯と自分のアイデアをまとめていきます。

Codepenで見つけた|コピペで使える!おしゃれなボタンデザイン16選!|CodeDoIt.com

プログラミング

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

f:id:hajime0308:20170202023745p:plain

 

scssをcssに変換して使い方は以下のサイトがオススメです。

www.sassmeister.com

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.

 

 

ボタンは美しいデザイン、シンプルなデザインを用意してあげることがユーザーにとって良いことだと思います。

ぜひご活用ください。また以下のようなメディアも作ろうかと考えています。

今後コードもshareされる時代が来ると予想している僕は来ると思っています(ニヤw)

http://codedoit.com/

 

関連記事

hajimesbusiness.hatenablog.com

hajimesbusiness.hatenablog.com