こんにちは、ECCUBERの渡部です。
ECCUBE歴はメンバーの中でもペーペーですがフロントエンド歴は長いので、HTMLやCSSでのUIカスタマイズを中心に書かせていただきます。

ということで、今回はカートボタンをCSSのみでカスタマイズしましょう。

上記はEC-CUBE4系デフォルトテーマの商品詳細画面になります。

デモURL: https://demo4.ec-cube.net/products/detail/22
ここの「カートに入れる」ボタンをカスタマイズします。HTMLソースはいじりません。

/* html */
<div class="ec-productRole__btn">
	<button type="submit" class="ec-blockBtn--action add-cart">
		カートに入れる
	</button>
</div>

やること

  1. 疑似要素を使用してスタイル要素を増やす。
  2. 疑似要素を変形させる。
  3. オンマウスでのアニメーションを付ける。

簡単ですが見た目は以下のようにします。


ボタン要素の中に白いボーダーを加えオンマウス時に太い線に代わる感じです。

CSSのソースは以下になります。

/* CSS */
button.ec-blockBtn--action.add-cart {
	position: relative;
}

button.ec-blockBtn--action.add-cart:before {
	content: "";
	display: block;
	border: 1px solid #FFFFFF;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: scale(0.9,0.7);
	-moz-transform: scale(0.9,0.7);
	-ms-transform: scale(0.9,0.7);
	-o-transform: scale(0.9,0.7);
	transform: scale(0.9,0.7);
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}

button.ec-blockBtn--action.add-cart:hover:before {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	border: 8px solid #FFFFFF;
}

①疑似要素を使用してスタイル要素を増やす。

まずは、ボーダー用の要素を作ります。
今回は、HTMLを編集しない前提になりますので、CSSより疑似要素を追加していきます。

6行目で使用している:beforeを追加しています。これは指定の要素内容の前に一つ疑似的に要素を追加することができます。まだ内容が定義されていないため、追加しても見た目上何もないように見えます。
:beforeを使用する場合はcontentの要素を定義します。

/* HTML */
<button type="submit" class="ec-blockBtn--action add-cart">
	before
	カートに入れる
</button>

/* CSS */
button.ec-blockBtn--action.add-cart {
	position: relative;
}

button.ec-blockBtn--action.add-cart:before {
	content: "";
	display: block;
	border: 1px solid #FFFFFF;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

上記のようにCSS側で:beforeの疑似要素を定義するとWebサイト側でbuttonの内容(カートに入れる)の前に「before」の疑似要素が追加されます。

疑似要素のcontentの定義ですが、ダブルクォーテーションで囲った中の内容が表示されます。ここについてはcontentのスタイルを使用すれば中身はなくとも疑似要素は生成されます。content: “”; などで十分です。

疑似要素をスタイル付けやすくするために以下を加えています。

  • 疑似要素はデフォルトdisplay要素はinline要素のためblock要素に変更し、widthとheightを定義する。
  • ボーダーを加える。1px solid #FFFなどで。
  • before要素を本来のbuttonコンテンツにかぶせるように浮かせる。親のbuttonにposition: relative; と疑似要素にposition: absolute;

上記のposition周りについてはまた別の機会に詳しく書きます。
ちなみに:beforeでお察しの通りafterも同様の定義で使用できます。

②疑似要素を変形させる。

先程疑似要素を追加しましたので、その疑似要素を使用して既存ボタンとは別のスタイルを加えていきます。

見本の通りボタン内側に白ボーダーを入れます。
その後にtransformのscaleを使用してサイズを縮小します。
縮小の値はscale(横の拡縮率,縦の拡縮率)で入力します。1が100%で0が0%です。
transitionはアニメーション補完用のスタイルです。説明は③で行います。

button.ec-blockBtn--action.add-cart:before {
	-webkit-transform: scale(0.9,0.7);
	-moz-transform: scale(0.9,0.7);
	-ms-transform: scale(0.9,0.7);
	-o-transform: scale(0.9,0.7);
	transform: scale(0.9,0.7);
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}

③オンマウスでのアニメーションを付ける。

先程、設定したtransitionが使用されます。
transition: 補完するスタイル名 アニメーション時間 アニメーションパターン;
上記で定義します。Allにしておくとすべてのスタイルが適用されます。

定義した状態で、通常時とオンマウス時のスタイルに始まりと終わりのパラメータを追加することで簡易的にCSSアニメーションが行えます。

(通常時)
button.ec-blockBtn–action.add-cart:before
→border: 1px solid #FFFFFF;

(オンマウス時)
button.ec-blockBtn–action.add-cart:hover:before
→border: 8px solid #FFFFFF;

上記のように設定するとオンマウス時に0.25sの時間でボーダーの太さがニョキっと太くなります。

button.ec-blockBtn--action.add-cart:hover:before {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	border: 8px solid #FFFFFF;
}

完成見本

今回はborderとscaleを設定していますので、オンマウスするとborderがニョキっと太くなりボタンいっぱいに広がり枠のような形になりますね。

まとめ

アニメーション時間やアニメーションパターンなどを変えたり、回転や移動を加えることでより動きのあるアニメーションボタンが作れたりします。
CSSでのアニメーションの方がjsでアニメーション作るよりも挙動が早いので簡単なレベルのものであればCSSで完結してしまうのもアリですね。

今後もフロントエンド周りの改修をベースに投稿したいと思います。
最後までお読みいただきありがとうございました。