Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Design Team

    (@bngdesign)

    @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.
    Thread Starter kmgreek

    (@kmgreek)

    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

    Plugin Author Design Team

    (@bngdesign)

    @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

    (@kmgreek)

    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

    (@bngdesign)

    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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Button CSS’ is closed to new replies.