The default buttons in a standard Magento theme are pretty boring. It’s something that always gets changed during custom theme development. It’s not really that hard to do.
With the addition of a few lines of code to the style sheet, and a color class added to the button element, you can really upscale your buttons as well as give them some interactivity.
Here is what we the new button will look like when we have changed css and and added a color class to the button (top is default button):
The process is to replace the default button styling in your theme’s styles.css file. Here is what you should insert instead of default button styles in css:[download id=”2088″]
Then change the buy button in the appropriate template files (addtocart.phtml) to add a color class. Here is an example:[download id=”2092″]
Things to consider
- When you add the color codes to the style sheet, make sure to delete all the button.button and button.span rules. They won’t be needed.
- There are some starter color classes inside the css file. Feel free to change the color codes for these gradients to match your needs
- These css changes will affect all buttons in magento, so be prepared to change all buttons, including newsletter, search and checkout buttons.
- If you want to change color of a button, just add the appropriate color to the button tag(in class section).
- There are also some shape/size classes that you can add to your buttons. These include bigrounded, medium, and small.
Good Luck!