logo_whitelogo_bluecalendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresssearchpencilbullhorncarttvstats-dotsstats-barstabhtml-fivepasteeye

CSS - ボタンにプログレスバー

Web制作者やデザイナー向けのお役立ち情報を配信

Corporate Top  ›

Progress Button Styles

Progress Button Styles | Codrops

デモ

進行状況を示すインジゲータとして機能する「フラットデザイン+3Dボタン」のセットです。ボタンを回転させながら、ボタンの側面にプログレスバーを表示。

こちらは送信ボタンをクリックした時にプログレスバーを表示するサンプル。ありきたりになりがちなボタンアクションに変化を加えたいときの参考に。

Related Articles

2015/07/3

Web Design

Illustrator - オブジェクト全体に合わせる方法...

Illustrator で画像を配置した時に余白ができないように、オブジェクトを合わせる方法です。 このよ...read more

2014/07/18

Web Design

[Photoshop] 

Photoshop - 厳選ウィジェットPSDファイル100...

100 + Web Widget Designs PSD - CSS Author ウェブデザイナーのため...read more

2014/07/18

Web制作

[css] 

CSS - CSSのみで斜めの背景を表示する...

Skewed background with CSS HTMLとCSSのみで歪んだ背景を表示するコード。背...read more

2014/07/11

Web制作

[css] 

CSS - 紙のような3D ボタンエフェクト集...

3D Paper button effects - CodePen 紙の質感をCSSで表現したマウスホバー...read more

Contact

お問い合わせ

Mail Form

お仕事のご依頼やご相談はこちらからお問い合わせください。

お問い合わせ

Access

TEL(FAX): 093-616-9373 / 営業時間:10時~18時

アクセス