Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #432806

    Hello!
    I added border to buttons by following code:

    #top .avia-button-fullwidth {
        border: 2px solid rgb(255, 0, 78);
    }

    But now there is an additional stroke while hovering the button.
    How can I add border ONLY for basic version of button, so for the hover version to be NO border?
    Regards, Vital

    • This topic was modified 9 years, 6 months ago by Vital.
    #432914

    Hey Vital!

    Have you figured this one out – http://imgur.com/a/Jv0c8 ?
    If not, please elaborate :)

    Cheers!
    Yigit

    #432916

    Hey!
    I just made a little make-up to hide the border – colored the button with the same color as the border. But in fact it is still here: http://take.ms/dyccj

    #433314

    Hi!

    I checked the code and it’s identical for both hover and non-hover states, it look a lot thicker on hover though. I think it’s one of those colour combinations which makes it look different from what it really is.

    Best regards,
    Rikard

    #433385

    Hey!
    May be we can use some CSS rules to add hover version like I did in other case?

    
    .inner_sort_button<strong>:hover span</strong> {
      color: #ff0062!important;
    }

    Best regards,
    Vital

    #434188

    Hey!

    Please add following code to Quick CSS

    #top .avia-button-fullwidth:hover {
      border-width: 1px;
    }

    Cheers!
    Yigit

    #434307

    Hey! Thanks for the answer!
    I modified the code for it to be without border at all while on hover:

    #top .avia-button-fullwidth:hover {
      border: none;
    }

    But button is jumping now. The reason is now there are two types of button style: main(basic+hover) and hover. So if I set main button border style to 2 px, and then set hover style to 2 px, the result hover will be 2+2 px border.

    As there is no way to make a inner border I thing the best solution is creating two different rules: one for basic button status and one for hover button status. Is it possible?

    Cheers!
    Vital

    • This reply was modified 9 years, 6 months ago by Vital.
    #434592

    Hey!

    Have you tried the inset box shadow? http://makandracards.com/makandra/12019-css-emulate-borders-with-inset-box-shadows

    Regards,
    Ismael

    #434630

    Hay!
    Many thanks, Ismael! You rock!
    I used http://www.cssmatic.com/box-shadow to generate vadit crossbrowser code. Now it’s perfect!

    Cheers!
    Vital

    #434988

    Hi!

    Great, glad we could help :)

    Regards,
    Rikard

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.