Advertisement

css- button

 

CSSボタンデザインは、スタイルを変えるだけでガラリと印象を変えることができるウェブデザイン要素のひとつです。

 

Copy & Paste CSS は、AmazonやSpotify、Slackといった有名Webサイトで使われているボタンデザイン用CSSスニペット77個を集めた無料ツールです。ボタンをクリックするだけで、Internet Explorer や Chrome などクロスブラウザ対応のCSSソースコードをコピペできます。

 

 

詳細は以下から。

 

 

AmazonやSpotifyも!有名サイトのCSSボタンデザイン77個をコピペ再現できる Copy & Paste CSS

 

Copy & Paste CSSは、海外でよく見かける有名サイトで使われれているボタンスタイルをCSSで再現し、コピペで実装できるようにまとめたCSSライブラリです。

 

css- button

 

BootstrapやGithub、TailwindといったHTMLフレームワーク用ボタンスタイルから、AmazonやAirbnb、Slack、Spotifyなど合計29サイトのCSSボタンを集めています。

 

ボタン一覧の中からお好みのボタンを選択、クリックするだけで、Webデザイン制作にそのまま使えるCSSソースコードをコピーできます。

 

screencapture-copy-paste-css-2021-06-29-12_50_11

 

 

CSSボタンデザインをコピペできる他のライブラリと一緒に活用してみてはいかがでしょう。

 

この他にもコピペで実装できるボタン用HTMLスニペットのコレクションも活用してみると良いでしょう。

 

この記事では、HTMLとCSSを中心にデザインされた、思わず押したくなる最新ボタンエフェクト用コードスニペットをまとめてご紹介します。 コンテンツに注

 

ありがちなボタンデザインの間違いを正解例と比較しながら紹介しています。

 

海外サイト Medium で公開された Design Better Buttons を著者 Andrew Coyle より許可をもらい、意訳転載しています。

 

 

Copy & Paste CSSではボタンの他にも、CSSボックスシャドウを集めたライブラリSimple CSS Box-shaodw Examplesも公開されています。こちらも同様にクリック一発でCSSソースコードをコピペ可能です。

 

screencapture-copy-paste-css-box-shadows-2021-06-29-12_50_22

 

 

82種類のCSSドロップシャドウを集めたライブラリもオススメですよ。

 

マテリアルデザインや最近話題のニューモーフィズム・スタイルで見かける、立体感を演出するドロップシャドウ、影エフェクト。 CSS box-shadow

 

 

進化の止まらないウェブは、便利なツールを利用することでデザイン制作をより快適に進めることができ、時間短縮にもつながります。面倒だなーと思う作業があるときは、まず自動ツールがないかチェックしてみると良いでしょう。

 

この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CS
この記事では、日々進化を続けるWeb制作で役立つ、便利な最新オンラインツールをまとめてご紹介しています。 これまではむずかしいと思っていたことや、面倒な作業を