Title: Button CSS
Last modified: July 19, 2018

---

# Button CSS

 *  [kmgreek](https://wordpress.org/support/users/kmgreek/)
 * (@kmgreek)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/button-css-5/)
 * Is it possible style back & submit buttons? Do they have a css class?

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [Design Team](https://wordpress.org/support/users/bngdesign/)
 * (@bngdesign)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/button-css-5/#post-10510205)
 * [@kmgreek](https://wordpress.org/support/users/kmgreek/)
 * At the moment, I do not have any styles on the buttons. You should be able to
   access them using the following element ids:
    #backbutton #submitbutton
 * I believe modifying the styles for those id’s will do what you want. If not, 
   please be sure to let me know and I’ll take a closer look.
 * _[ [Signature deleted](https://wordpress.org/support/guidelines/#do-not-spam)]_
    -  This reply was modified 7 years ago by [Jan Dembowski](https://wordpress.org/support/users/jdembowski/).
 *  Thread Starter [kmgreek](https://wordpress.org/support/users/kmgreek/)
 * (@kmgreek)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/button-css-5/#post-10511910)
 * Nate,
 * Thanks, that worked for desktop, but mobile looks different. Are there different
   id’s for mobile?
 * Desktop: [https://www.dropbox.com/s/8h7jjzof5coll3u/Desktop.png?dl=0](https://www.dropbox.com/s/8h7jjzof5coll3u/Desktop.png?dl=0)
   
   Mobile: [https://www.dropbox.com/s/z1ewrbew9605olh/mobile.PNG?dl=0](https://www.dropbox.com/s/z1ewrbew9605olh/mobile.PNG?dl=0)
 *  Plugin Author [Design Team](https://wordpress.org/support/users/bngdesign/)
 * (@bngdesign)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/button-css-5/#post-10512361)
 * [@kmgreek](https://wordpress.org/support/users/kmgreek/)
 * There shouldn’t be different id’s for mobile. I did check out your shop on Chrome
   and it was doing the same thing, so I picked apart your css a little bit and 
   came up with the following. Please try plugging this in and let me know how it
   goes. I just grabbed the styles from your buttons on the previous page and assigned
   them to the id’s of the two buttons from our plugin.
 *  #backbutton, #submitbutton {
    color:#ffffff;
 *  font-family: Karla, Arial, Helvetica, sans-serif;
    font-weight: 700; letter-
   spacing: 1px;
 *  padding: 11px 23px;
    line-height: 16px; font-size: 13px;
 *  background: #32a242;
    text-transform: uppercase; color: #ffffff; transition:
   all .2s; border-width: 0px; border-style: solid; border-color: #ffffff; border-
   radius: 25px; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition:
   all .2s; -o-transition: all .2s; -webkit-border-radius: 25px;
 *  display: inline-block;
    position: relative; outline: 0; zoom: 1; border: 1px
   solid transparent; text-align: center; text-transform: uppercase; text-decoration:
   none; font-weight: 700; cursor: pointer; box-sizing: border-box; -webkit-transition:
   all .2s; transition: all .2s; }
 *  #backbutton:after, #backbutton:before, #submitbutton:after, #submitbutton:before{
   
   transition-property: color,background-color,border-color; transition-duration:.
   2s; transition-timing-function: linear; }
 *  #backbutton:hover, #submitbutton:hover {
    background-color:#EBAD37; }
 *  Thread Starter [kmgreek](https://wordpress.org/support/users/kmgreek/)
 * (@kmgreek)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/button-css-5/#post-10513082)
 * Thanks for the cleaned up CSS. That helped. It’s not perfect but better. On mobile
   for some reason the buttons are three dimensional instead of flat.
 *  Plugin Author [Design Team](https://wordpress.org/support/users/bngdesign/)
 * (@bngdesign)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/button-css-5/#post-10513182)
 * Sorry about that. I did a little digging and found that mobile browsers might
   force their own css styles on your buttons. Try adding this to the css definitions
   for those elements:
    -webkit-appearance: none;
 * I found that here, but am not positive it will be the fix you need:
    [https://drupal.stackexchange.com/questions/171952/styling-submit-form-button-for-mobile](https://drupal.stackexchange.com/questions/171952/styling-submit-form-button-for-mobile)

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Button CSS’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/woo-nmi-three-step_9c7495.svg)
 * [NMI Gateway For WooCommerce](https://wordpress.org/plugins/woo-nmi-three-step/)
 * [Support Threads](https://wordpress.org/support/plugin/woo-nmi-three-step/)
 * [Active Topics](https://wordpress.org/support/plugin/woo-nmi-three-step/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woo-nmi-three-step/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woo-nmi-three-step/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [Design Team](https://wordpress.org/support/users/bngdesign/)
 * Last activity: [7 years, 10 months ago](https://wordpress.org/support/topic/button-css-5/#post-10513182)
 * Status: not resolved