Button CSS

@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 ]

• This reply was modified 5 years, 10 months ago by Jan Dembowski.

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
Mobile: https://www.dropbox.com/s/z1ewrbew9605olh/mobile.PNG?dl=0

@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;
}

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.

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