Button CSS
-
Is it possible style back & submit buttons? Do they have a css class?
-
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
#submitbuttonI 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.
-
This reply was modified 7 years 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=0There 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 -
This reply was modified 7 years ago by
The topic ‘Button CSS’ is closed to new replies.