無料【ボタン・バナー】白グラデーション透過png-サイズ違いセット[grad001w]

グラデーションリンクボタン影付

小グラデーション

横幅:200px

高さ:35px

枠幅:1px

背景色&枠色:#ffd5d5

 

 

HTMLタグ

<div class="btn001" style="background-color:#ffd5d5; border:#ffd5d5 1px solid; width:200px; margin:0 auto;"><a class="grad001s-white" style="line-height:35px;" href="ここにリンク先"><strong>お問い合わせ</strong></a></div>

 

中グラデーション

横幅:200px

高さ:50px

枠幅:1px

背景色&枠色:#ffd5d5

 

 

HTMLタグ

<div class="btn001" style="background-color:#ffd5d5; border:#ffd5d5 1px solid; width:200px; margin:0 auto;"><a class="grad001m-white" style="line-height:50px;" href="ここにリンク先"><strong>お問い合わせ</strong></a></div>

 

大グラデーション

横幅:200px

高さ:80px

枠幅:1px

背景色&枠色:#ffd5d5

 

 

HTMLタグ

<div class="btn001" style="background-color:#ffd5d5; border:#ffd5d5 1px solid; width:200px; margin:0 auto;"><a class="grad001l-white" style="line-height:80px;" href="ここにリンク先"><strong>お問い合わせ</strong></a></div>

 

グラデーションリンクボタン影なし

小グラデーション

横幅:200px

高さ:35px

枠幅:1px

背景色:#d5ffd5

枠色:#cccccc

 

 

HTMLタグ

<div class="btn002" style="background-color:#d5ffd5; border:#cccccc 1px solid; width:200px; margin:0 auto;"><a class="grad001s-white" style="line-height:35px;" href="ここにリンク先"><strong>お問い合わせ</strong></a></div>

 

中グラデーション

横幅:200px

高さ:50px

枠幅:1px

背景色:#d5ffd5

枠色:#cccccc

 

 

HTMLタグ

<div class="btn002" style="background-color:#d5ffd5; border:#cccccc 1px solid; width:200px; margin:0 auto;"><a class="grad001m-white" style="line-height:50px;" href="ここにリンク先"><strong>お問い合わせ</strong></a></div>

 

大グラデーション

横幅:200px

高さ:80px

枠幅:1px

背景色:#d5ffd5

枠色:#cccccc

 

 

HTMLタグ

<div class="btn002" style="background-color:#d5ffd5; border:#cccccc 1px solid; width:200px; margin:0 auto;"><a class="grad001l-white" style="line-height:80px;" href="ここにリンク先"><strong>お問い合わせ</strong></a></div>

 

★ピンク字(横幅)、★青字(高さ)★オレンジ字(枠幅)★水色字(背景色&枠色)は、

それぞれお好きに変更していただけます。

サイズ調整や色指定を行ってご自由にカスタマイズしてください。

 

<カスタマイズのヒント>

先にリンクを設定後、HTMLタグを後で追記する方が簡単にできます。

使い方

こちらでご案内している使い方は<Jimdoユーザー(独自レイアウト)>を対象としています。

HTMLやCSS等の知識をお持ちの方は、もちろんその他のサイトでも利用OKです。

 

  1. 画像をダウンロードし、圧縮ファイルを解凍後、
    レイアウト>独自レイアウト>ファイル に「ファイルを選択」し「アップロード」する。(★)
  2. 下記CSSコードをコピーし、
    レイアウト>独自レイアウト>CSS に貼り付けて「保存」。(★)
  3. お好みの見本のHTMLタグをコピーし、文章パーツのHTMLへ貼り付けてお使いください。

 

★ヒント

 ファイルアップロードの方法|CSS編集の方法


ダウンロードは下記から

※当サイトのフリー素材は、リンクウェア(リンクやクレジット表記を条件に無料で使用可)と

させていただいております。ダウンロード前に必ず利用規約をお読みください。

利用規約こちら

 

ダウンロード
無料【背景・パターン】白グラデーション透過png-サイズ違いセット[grad001w]
ボタン背景や見出し背景に最適な白色グラデーション画像です。

「お問い合わせ」や「お申し込み」などのリンクをボタン風に表現できます。
また、見出し背景にも使っていただけます。

★ポイント★
白色のグラデーションを高さ違い(S、M、L)の3種類をご用意しました。
80%の透明にしているので、お好きな背景色と馴染みやすくしています。

<内容>
計3種類のPNGデータを圧縮ファイル(Zip形式)にしています。
ダウンロード後、ダブルクリックして解凍後、お使いください。
grad001w.zip
zip ( 圧縮 ) ファイル 1.2 KB

CSSコードは下記

/*--------------------------------

 ボタン

--------------------------------*/

/*影付*/

.btn001 {

border-radius: 10px;/*角丸*/

-webkit-border-radius: 10px;/*角丸*/

-moz-border-radius: 10px;/*角丸*/

}

 

.btn001 a {

display:block;

text-decoration:none !important;

text-align:center;

border-radius: 10px;/*角丸*/

-webkit-border-radius: 10px;/*角丸*/

-moz-border-radius: 10px;/*角丸*/

-webkit-box-shadow: 3px 3px 5px 0 rgba(0,0,0,0.3);/*影*/

-moz-box-shadow: 3px 3px 5px 0 rgba(0,0,0,0.3);/*影*/

box-shadow: 3px 3px 5px 0 rgba(0,0,0,0.3);/*影*/ 

}

 

/*影なし*/

.btn002 {

border-radius: 10px;/*角丸*/

-webkit-border-radius: 10px;/*角丸*/

-moz-border-radius: 10px;/*角丸*/

}

 

.btn002 a {

display:block;

text-decoration:none !important;

text-align:center;

border-radius: 10px;/*角丸*/

-webkit-border-radius: 10px;/*角丸*/

-moz-border-radius: 10px;/*角丸*/

}

 

/*グラデーション-高さ35px*/
.grad001s-white {
background:url(grad001s-white.png) top repeat-x;
border-radius: 10px;/*角丸*/
-webkit-border-radius: 10px;/*角丸*/
-moz-border-radius: 10px;/*角丸*/
}
 
/*グラデーション-高さ50px*/
.grad001m-white {
background:url(grad001m-white.png) top repeat-x;
border-radius: 10px;/*角丸*/
-webkit-border-radius: 10px;/*角丸*/
-moz-border-radius: 10px;/*角丸*/
}
 
/*グラデーション-高さ100px*/
.grad001l-white {
background:url(grad001l-white.png) top repeat-x;
border-radius: 10px;/*角丸*/
-webkit-border-radius: 10px;/*角丸*/
-moz-border-radius: 10px;/*角丸*/
}