【HTML】【CSS】コピペで使えるサンプル集－ボタン編

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

第二弾は「ボタン」編として一般的に使用されているようなものをまとめていきます。
コピペだけで使用可能なものだけを紹介しています。

■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください
・ボタンのキャプションはご使用時には書き換えてください
・背景色を変更したい場合は「background」の部分を変更してください
・文字色を変更したい場合は「color」の部分を変更してください

関連記事

・【HTML】【CSS】コピペで使えるサンプル集－見出し編（シンプル）
・【HTML】【CSS】コピペで使えるサンプル集－見出し編（応用）
・【HTML】【CSS】コピペで使えるサンプル集－背景編

・【HTML】【CSS】コピペで使えるサンプル集－引用部分編

────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

ボタン サンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

※マウスを載せた時の動作は【WEB】マウスホバーエフェクトの導入の方法を利用しています。



<button style="background: -moz-linear-gradient(top,#0099CC 0%,#006699); background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699)); border: 1px solid #DDD; color: white; padding: 10px 0; width: 100px;"> ボタン①</button>



<button style="background: -moz-linear-gradient(top, #fff, #F1F1F1 1%, #F1F1F1 50%, #DFDFDF 99%, #ccc); background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #F1F1F1), color-stop(0.5, #F1F1F1), color-stop(0.99, #DFDFDF), to(#ccc));"> ボタン②</button>



<button style="background: #EEE; border: 3px solid #DDD; color: #111111; padding: 10px 0; width: 100px;"> ボタン③</button>





<button style="background: #EEE; border-bottom: 5px solid #FC0; border-left: 5px solid #09C; border-right: 5px solid #9C0; border-top: 5px solid #C00; color: #111111; padding: 10px 0; width: 100px;"> ボタン④</button>



<button style="background: #EEE; border-bottom: 3px dotted #DDD; border-left: 3px solid #DDD; border-right: 3px solid #DDD; border-top: 3px dotted #DDD; color: #111111; padding: 10px 0; width: 100px;"> ボタン⑤</button>





<button style="-moz-border-radius: 4px; -webkit-border-radius: 4px; background: -moz-linear-gradient(top,#BFD9E5, #63B0CF 50%,#0080B3 50%,#09C); background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#63B0CF), color-stop(0.5,#0080B3), to(#09C)); border-radius: 4px; border: 1px solid #DDD; color: white; padding: 10px 0; width: 100px;"> ボタン⑥</button>



<button style="-moz-border-radius: 70px; -moz-border-radius: 8px 8px 0px 0px; -webkit-border-radius: 70px; -webkit-border-radius: 8px 8px 0px 0px; background: #EEE; background: -moz-linear-gradient(top,#BFD9E5, #63B0CF 50%,#0080B3 50%,#09C); background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#63B0CF), color-stop(0.5,#0080B3), to(#09C)); border-radius: 8px 8px 0px 0px; color: #111111; color: white; padding: 10px 0; width: 100px;"> ボタン⑦</button>



<button style="-moz-border-radius: 8px 8px 0px 0px; -webkit-border-radius: 8px 8px 0px 0px; background: -moz-linear-gradient(top,#FFF 0%,#FFF 3%,#E6E6E6 3%,#FFF); background: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(0.03,#FFF), color-stop(0.03,#E6E6E6), to(#FFF)); border-bottom: 3px solid #0099CC; border-radius: 8px 8px 0px 0px; border: 1px solid #CCC; color: #111111; padding: 10px 0; width: 100px;"> ボタン⑧</button>



<button style="-moz-border-radius: 20px; -moz-box-shadow: inset 1px 1px 1px rgba(000,000,000,0.3); -webkit-border-radius: 20px; -webkit-box-shadow: inset 1px 1px 1px rgba(000,000,000,0.3); background: -moz-linear-gradient(top,#FFF 0%,#E6E6E6); background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6)); border-radius: 20px; color: #111111; padding: 10px 0; width: 100px;"> ボタン⑨</button>



<button style="background-size: auto 2px; background: #337fcc; background: -moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1)); background: -webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1))); border-radius: 5px; border: 1px solid #225588; box-shadow: 1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset; color: white; display: block; font-size: 28px; font-weight: bold; padding: 12px 0 8px 0; text-align: center; text-decoration: none; text-shadow: 0 -1px 0px #225588,0 -2px 0px #225588; width: 300px;"> ボタン⑩</button>



<button style="-webkit-transform: rotate(720deg); -webkit-transition: all 1s ease; background-color: plum; border-radius: 50%; color: white; display: block; height: 150px; line-height: 150px; text-decoration: none; transform: rotate(720deg); transition: all 1s ease; width: 150px;"> ボタン⑪</button>



<button style="-webkit-filter: grayscale(0.5) blur(1px); border: 3px solid hsla(138, 95%, 45%, 1); color: hsla(138, 95%, 45%, 1); display: inline-block; font-weight: 900; font: 13px Lato; letter-spacing: 4px; margin: 10px 10px 10px 0px; opacity: 0.6; padding: 10px; text-decoration: none; text-transform: uppercase;"> ボタン⑫</button>


こちらも合わせてご確認ください☆

関連記事

・【HTML】【CSS】コピペで使えるサンプル集－見出し編（シンプル）
・【HTML】【CSS】コピペで使えるサンプル集－見出し編（応用）
・【HTML】【CSS】コピペで使えるサンプル集－背景編

・【HTML】【CSS】コピペで使えるサンプル集－引用部分編