blog

2013.04.12(Tips)

[tips]Welcartで「カートに入れる」ボタンをCSSで画像に変更する方法

Welcartの「カートに入れる」ボタンをCSSで設定する方法。

.skubutton{
  background-image: url(images/cart_btn.png); //使う画像を指定
  background-repeat: no-repeat;
  width: 176px; //画像の幅
  height: 56px; //画像の高さ
  padding: 0px;
  margin: 0px;
  border:none;
  cursor:pointer;
  overflow:hidden;
  display: block;
  text-indent: 500px;   //テキストを画像エリアから飛ばす
}

inputに指定されているクラスskubuttonを上記のように設定する。

text-indentで、テキストを画像エリアから見えなくしています。

- AD -