[Rakuten RMS] Customize the "Add to Cart" button

This is a business memo.

On e-commerce sites, buttons such as ``Add to Cart'' and ``Add to Cart'' play an extremely important role in guiding purchasers.

Visibility is quite high on Yahoo! and Amazon, but for some reason Rakuten leaves it as the default and looks terrible...

So, I tried customizing the "Add to Cart" button.
Below is a memo of how I did it.

How to customize the "Add to Cart" button

The default looks like this. ↓

Customize this.

If you look at the relevant part of the HTML, it will look like this: ↓

<input value="Add to shopping cart" type="submit" id="" data-timesale-id="">

It would be a good idea to design this using CSS.

input[value="Add to shopping cart"] { /*Describe the content you want to customize here*/ }

Afterword

Below is a sample made during rush construction.

input[value="Add to cart"] { background-color: #ff6767; background-image: -webkit-gradient(linear, left top, left bottom, from(#ff6767), to(#BE0000)); background -image: -webkit-linear-gradient(top, #ff6767, #BE0000); background-image: -moz-linear-gradient(top, #ff6767, #BE0000); background-image: -ms-linear-gradient( top, #ff6767, #BE0000); background-image: -o-linear-gradient(top, #ff6767, #BE0000); background-image: linear-gradient(to bottom, #ff6767, #BE0000);filter:progid } /*Click */ input[value="Add to cart"]:active { background-color: #BE0000; background-image: -webkit-gradient(linear, left top, left bottom, from(#BE0000), to(# ff6767)); background-image: -webkit-linear-gradient(top, #BE0000, #ff6767); background-image: -moz-linear-gradient(top, #BE0000, #ff6767); background-image: -ms -linear-gradient(top, #BE0000, #ff6767); background-image: -o-linear-gradient(top, #BE0000, #ff6767); background-image: linear-gradient(to bottom, #BE0000, #ff6767 );filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#BE0000, endColorstr=#ff6767); }

When you preview it, ↓

It will look like this.

Afterword

This makes it easy to customize the buttons.

use box sizing property for align the size of the form items