Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 22, 2015 at 2:33 pm #432806
    Vital

    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, 8 months ago by Vital.
    April 22, 2015 at 4:21 pm #432914
    Yigit

    Hey Vital!

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

    Cheers!
    Yigit

    April 22, 2015 at 4:26 pm #432916
    Vital

    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

    April 23, 2015 at 9:25 am #433314
    Rikard

    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

    April 23, 2015 at 11:56 am #433385
    Vital

    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

    April 24, 2015 at 4:03 pm #434188
    Yigit

    Hey!

    Please add following code to Quick CSS

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

    Cheers!
    Yigit

    April 24, 2015 at 6:10 pm #434307
    Vital

    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, 8 months ago by Vital.
    April 25, 2015 at 6:17 am #434592
    Ismael

    Hey!

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

    Regards,
    Ismael

    April 25, 2015 at 8:42 am #434630
    Vital

    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

    April 27, 2015 at 4:57 am #434988
    Rikard

    Hi!

    Great, glad we could help :)

    Regards,
    Rikard

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