CSSで光沢のあるボタンや背景を作成

背景画像を使用せずに光沢のあるボタンや背景用ＣＳＳです。
パソコンでは、全く問題なく光沢のあるように見えますが、解像度の高いモバイル端末では、ぎりぎりＯＫ？のレベルとなります
弊社のようなウェブ制作業者としては、使うかどうか？迷うところですが、ＣＳＳを圧縮すれば、ページの読み込みは、早いはずなので、 画像点数が多い場合にページ表示を軽くするためには、使えるでしょう。
ちなみにページタイトルの浮き出し文字は、画像ではなく、CSSです。ソース表示をされて、コピペ利用ください (htmlに直接入れてます)



�@個別ＣＳＳ .greenbutton {font-size:1.2em; background: -moz-linear-gradient(top,#BFD9E5, #3D95B7 50%,#0080B3 50%,#0099CC); background: -webkit-gradient (linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#3D95B7), color-stop(0.5,#0080B3), to(#0099CC)); color: #FFF; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: 1px solid #0099CC; -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3), inset 0px 0px 3px rgba(255,255,255,0.5); -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3), inset 0px 0px 3px rgba(255,255,255,0.5); text-shadow: 0px 0px 3px rgba(0,0,0,0.5); width: 240px; padding: 10px 0 10px 10px; margin: 10px 0; } }

上のボタンは、スマホでも完全にOKで問題なし

�A個別ＣＳＳ


.green { /* background styles */ position: relative; display: inline-block; padding: 15px 25px; background: green; /*for compatibility with older browsers*/ background-image: linear-gradient(green,lightgreen); /* text styles */ text-decoration: none; color: #fff; font-size: 25px; font-family: sans-serif; font-weight: 100; border-radius: 3px; box-shadow: 0px 1px 4px -2px #333; text-shadow: 0px -1px #333; } .green:after{ content: ''; position: absolute; top: 2px; left: 2px; width: calc(100% - 4px); height: 50%; background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2)); } .green:hover{ background: linear-gradient(#073,#0fa); }

�B一括ＣＳＳ
CSSで光沢のあるボタン CSSで光沢のあるボタン CSSで光沢のあるボタン CSSで光沢のあるボタン CSSで光沢のあるボタン CSSで光沢のあるボタン CSSで光沢のあるボタン

htmlは、下記の部分をソース表示でコピペください
CSSで光沢のある背景 CSSで光沢のある背景 CSSで光沢のある背景 CSSで光沢のある背景 CSSで光沢のある背景 CSSで光沢のある背景

CSSは、下記
.alltype{ position: relative; display: inline-block; padding: 15px 25px; background: green; background-image: linear-gradient(green,lightgreen); text-decoration: none; color: #fff; font-size: 25px; font-weight: 100; border-radius: 3px; box-shadow: 0px 1px 4px -2px #333; text-shadow: 0px -1px #333; } .alltype:after{ content: ''; position: absolute; top: 2px; left: 2px; width: calc(100% - 4px); height: 50%; background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2)); } .alltype:hover{ background: linear-gradient(#073,#0fa); } .alltypebuttons button{ margin:10px; }