I had been struggling with CSS on a simple website and in case you are in the same situation, I am sharing my best tips on how to change the color and style of a button in CSS in worpress or similar coding.
Stripe Checkout Plugin for WordPress
I am using this plugin for a webshop on one of our clients websites and we wanted a red colored button instead of the standard white outlined button that is pink when it’s hovered – as it comes with in the plugin or your theme configuration.
Download Stripe Checkout Plugin for WordPress here
Guide to style button in css in wordpress theme
Before:
After:
- I went in to wordpress backend and hovered over “Apperance” and then “Theme file editor” or any other place where you can control the css of your wordpress theme like style.css file on your ftp.
- I added these lines in CSS to include the whole button:
input[type=button], input[type=submit], input[type=reset] {
background-color: #B30015;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}[type=”button”]:focus, [type=”button”]:hover, [type=”submit”]:focus, [type=”submit”]:hover,
button:focus,
button:hover {
color: white;
background-color: red;
text-decoration: none;
} - then you can copy the same above code and paste it into your css file for your website. You could also change any of the colors and numbers to fit your needs like an outline in the hover or similar. The first part of the code is the coloring of the button when it’s not hovered. The second part of the code is the hovered part where you mouse hovers over it.
- Click save and it should affect your website’s buttons style.
Other guides you can find here:
How to Style Input and Submit Buttons
https://www.w3docs.com/snippets/css/how-to-style-input-and-submit-buttons.html
CSS to style Stripe credit card fields on PMPro checkout page
https://gist.github.com/ipokkel/dae7315386e48e80c28a718339543a8b
Test your CSS Tool
https://www.w3schools.com/css/tryit.asp?filename=trycss_form_button
Need more help with coding html or css and worpress?
I wish you good luck and if you ever need help with coding a website / csss / html or other – let us know by contacting us, and we can book a session for you.
Kindly Mark Barner, Owner and Webguru
