Advertisement

button-hover-2015-top

 

CSSをコピペしてウェブ制作に活用できる、ボタン用スニペットサンプルを、WEBデザイナーのためのコードコミュニティサイト、Codepenよりピックアップしてまとめています。

 

 

その場でコードを確認、編集することができるので、幅広いデザインプロジェクトに応用でき、アニメーションをうまく活かした新しいスタイルを、今後のウェブサイト制作に活用してみてはいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

CSSコピペで利用する、話題のボタンデザイン用スニペット、サンプルまとめ

 

Button

ボタンの四隅に■デザインを加えた、デザインアプリのようなデザインが素敵なボタンエフェクト。

See the Pen Button by Monirul Islam (@themirobin) on CodePen.

 

 

 

     

CSS Gradient Button, Hover Smoothly!

CSSグラデーションを使い、スムーズなホバーエフェクトを実現しています。

See the Pen CSS gradient button, hovers smoothly! by hawcubite (@hawcubite) on CodePen.

 

 

 

Button Animation

バタンにホバーすることで上下ラインが左右から伸びるアニメーション。

See the Pen Button Animation by Alex Pate (@alexpate) on CodePen.

     

 

 

 

Contact Button

形を変えながらEメールアドレスをホバー表示する、ユニークなデザインボタン。

See the Pen Contact button by Alberto Jerez (@ajerez) on CodePen.

 

 

 

CSS Process Buttons

ホバーすることで、文字テキストの横に矢印を追加する、シンプルで効果的なテクニック。

See the Pen CSS Process buttons by Mihael Tomić (@mihaeltomic) on CodePen.

     

 

 

 

Submit Button

ボタンをクリックすると、読み込みローディングアニメーションに変化し、最後に完了チェックマークが表示されます。

See the Pen Submit button by Martin Machýček (@machycek) on CodePen.

 

 

 

Gradient Ghost Buttons

カラフルなグラデーションを利用したボタンデザインは、3種類の異なるスタイリング方法で実現されています。

See the Pen Gradient Ghost Buttons by Alex (@akwright) on CodePen.

     

 

 

 

Animated Gradient Ghost Button Concept

グラデーションが徐々に変化する、スムーズなアニメーションを加えたボタン。

See the Pen Animated Gradient Ghost Button Concept by Arsen Zbidniakov (@ARS) on CodePen.

 

 

 

Gradient Animation Example

こちらもグラデーションにアニメーションを追加したボタンで、クリックに関係なくアニメーションが続きます。

See the Pen Gradient animation – example by Chris R (@chris2907) on CodePen.

     

 

 

 

Existential Gradient Buttons

ホバーすることでグラデーションが絶妙に変化するアニメーションが素敵。

See the Pen existential gradient buttons by alex baldwin (@goosey) on CodePen.

 

 

 

Button Styles

ボタンホバーすることで、背景イメージにグラデーションカラーが適用されるスタイリングは、CTAボタンとしても効果的。

See the Pen Button Styles by Christopher Dunn (@pxdunn) on CodePen.

     

 

 

 

Button Blip

チカチカと発光しているようなエフェクトを実装したボタン。

See the Pen Button Blip by Shaun Crittenden (@shaun) on CodePen.

 

 

 

Loading Animation

フワフワと浮いている、読み込みローディング用ボタンデザイン。

See the Pen Loading Animation by Jack Doyle (@jack-doyle) on CodePen.

     

 

 

 

Button Shine Effect

ホバーするたびにキラリと反射するエフェクトを加えています。

See the Pen Button Shine Effect by Dan Mensinger (@dmensinger) on CodePen.

 

 

 

Origami Dialog Effect

ボタンをクリックすると、折り紙のようにたたんだダイアログボックスが、伸縮しながら表示されます。

See the Pen Origami Dialog Effect by Bhakti Al Akbar (@balapa) on CodePen.

     

 

 

 

Twitter Heart

星からハートマークに変更されたTwitterのアイコンに、CSSスプライトとtransitionを利用することで、手軽にアニメーションを加えます。

See the Pen Twitter Heart by Donovan Hutchinson (@donovanh) on CodePen.

 

 

 

Diamond Shaped Icons

ひし形にデザインされたアイコンは、ホバーすることでロングシャドウ・エフェクトが加える、ひと手間かかったスタイリング。

See the Pen #1202 – Diamond shaped icons by LittleSnippets.net (@littlesnippets) on CodePen.

     

 

 

 

Triangles on Hover Button

ホバーすることで、ボタンの隅にCSSを利用して三角デザインを加えるスタイリング。

See the Pen Triangles on hover button by Eric Grucza (@egrucza) on CodePen.

 

 

 

More/Close Button

続きを読むボタンからのフルスクリーン表示を想定しており、滑らかなアニメーションでアイコンが移動します。

See the Pen More/close button by Chris Doble (@chrisdoble) on CodePen.

     

 

 

 

Add to Cart Button Interaction

クリックすることでボタンを二分割し、各テキストリンクに移動できるデザイン。オンラインショップの購入ボタンなどに。

See the Pen Add to Cart Button Interaction by Mason Fox (@masonfox) on CodePen.

 

 

 

Switch Button

クリックごとに滑らかに背景色が切り替わる、スイッチボタン用スタイリング。

See the Pen Switch Button by Nicolas Lanthemann (@vanderlanth) on CodePen.

     

 

 

 

Box/Button Hovers 波ラインがユニークな、シンプルなホバーエフェクト3種類セット。

See the Pen Box/Button Hovers by andrew wierzba (@andrewwierzba) on CodePen.

 

 

 

Liquid Filled Button

ボタンをクリックすると、液体が注がれたようなエフェクトが特長です。

See the Pen Liquid Filled Buttons by Scott Berg (@Bergability) on CodePen.

     

 

 

 

Flat Buttons

フラットスタイルのボタン各種は、ホバーすることで文字テキストがスライド表示されるアニメーション付き。

See the Pen Flat Buttons by Benjamin Vilina (@BenjaminVilina) on CodePen.

 

 

 

Buttons

パステルカラーの落ち着いた色使いは、幅広いプロジェクトに応用できる、シンプルで使い勝手の良いデザイン。

See the Pen Buttons by Taeha (@zootia) on CodePen.

     

 

 

 

Border Button

CSS trasformを利用し、ホバーすることでボーダーラインがアニメーション表示されます。

See the Pen CSS transform border button hover effects by Les (@lesbaa) on CodePen.

 

 

 

Pseudo Element Hover Effect

塗りつぶしタイプのボタンは、ホバーすることでボーダーラインが追加されます。

See the Pen Pseudo Element Hover Effect by Greg Sweet (@ControlledChaos) on CodePen.

     

 

 

 

Nature-Themed Buttons

マウスホバーすると、にょきにょきと木が生えてくるエフェクトが。

See the Pen Nature-Themed Buttons by Nick Ciliak (@nickcil) on CodePen.

 

 

 

Mobile Download Links

ホバーすると表示されているアイコンがズームアップされ、背景カラーがふわりと切り変わる、ダウンロードボタン向けスタイリング。

See the Pen Mobile Download Links by Michael Hobizal (@mikehobizal) on CodePen.

 

 

 

CSSで実装できる、魅力的なボタンデザイン用サンプル、テクニック30個まとめ

前回は3ヶ月ほど前にまとめています、こちらも一緒にいかがでしょう。

css-button-top

 

 

参照元リンク : Button by Monirul Islam – Codepen.io