WordPress.org

Support

Support » Themes and Templates » Customizr » [Resolved] Remove gradients/shadows/rounded edges from buttons

[Resolved] Remove gradients/shadows/rounded edges from buttons

  • Does anyone know how to remove the gradients/shadows/rounded edges from buttons—to make them look more “flat”?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Jan Dembowski

    @jdembowski

    Brute Squad and Volunteer Moderator

    Link to site? I’m not too familiar with that theme but I wouldn’t mind looking at it with Chrome’s Inspect Element tool.

    Thanks Jan.

    My site is darioalfonsi.com.

    But the question is generic to Customizr: all the buttons are shaded and rounded—as is the “Follow @wordpress” button at the bottom of this page.

    I’d like to move more towards the design of iOS 7, which gets rid of a lot of buttons, favouring simple text instead (e.g. the Learn more > “button” on Apple’s site.

    But I don’t know enough about Customizr’s design to remove all the colours/rounding.

    esmi

    @esmi

    Forum Moderator

    On your site, the button styling sems to be controlled by:

    .btn-primary {
        background-color: #EE7C2A;
        background-image: linear-gradient(to bottom, #F78C40, #E16309);
        background-repeat: repeat-x;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        color: white;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    }
    .btn {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background-color: whitesmoke;
        background-image: linear-gradient(to bottom, white, #E6E6E6);
        background-repeat: repeat-x;
        border-color: #CCCCCC #CCCCCC #B3B3B3;
        border-image: none;
        border-radius: 4px 4px 4px 4px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
        color: #333333;
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 0;
        padding: 4px 12px;
        text-align: center;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
        vertical-align: middle;
    }

    Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. It make life a lot easier. 🙂

    Thanks Esmi!

    I’m getting the hang of Firebug already, but somehow assumed buttons were more complicated. I’ll have a play with what you’ve given me.

    Well, I now have this for my front page buttons!:

    .btn-primary {
      color: #f67d28;
      text-shadow: none;
      background-color: transparent;
      background-image: none;
      background-repeat: no-repeat;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7F516764' , endColorstr='#7F516764');
      border-color: transparent;
      *background-color: transparent;
      /* Darken IE7 buttons by default so they stand out more given they won't have borders */
    
      filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
      border: none;
      *border: 0;
      border-bottom-color: transparent;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
      *margin-left: .3em;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
        border-style: none;
        border-width: 0;
        font-size: 18px;
        line-height: 100%;
    }
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .btn-primary.disabled,
    .btn-primary[disabled] {
      color: #777777;
      background-color: transparent;
      *background-color: transparent;
      text-decoration:none;
    }
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active {
      text-decoration: none;
    }
    
    .btn.active, .btn:active {
        box-shadow: none;
    }

    Don’t know how correct it is, but it works. Will gradually work on the other buttons.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Resolved] Remove gradients/shadows/rounded edges from buttons’ is closed to new replies.
Skip to toolbar