WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Remove gradients/shadows/rounded edges from buttons (6 posts)

  1. ElectricFeet
    Member
    Posted 1 year ago #

    Does anyone know how to remove the gradients/shadows/rounded edges from buttons---to make them look more "flat"?

  2. 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.

  3. ElectricFeet
    Member
    Posted 1 year ago #

    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.

  4. esmi
    Forum Moderator
    Posted 1 year ago #

    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. :-)

  5. ElectricFeet
    Member
    Posted 1 year ago #

    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.

  6. ElectricFeet
    Member
    Posted 11 months ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic