Tagged: button border
-
AuthorPosts
-
April 22, 2015 at 2:33 pm #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.
April 22, 2015 at 4:21 pm #432914Hey Vital!
Have you figured this one out – http://imgur.com/a/Jv0c8 ?
If not, please elaborate :)Cheers!
YigitApril 22, 2015 at 4:26 pm #432916Hey!
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/dyccjApril 23, 2015 at 9:25 am #433314Hi!
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,
RikardApril 23, 2015 at 11:56 am #433385Hey!
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,
VitalApril 24, 2015 at 4:03 pm #434188Hey!
Please add following code to Quick CSS
#top .avia-button-fullwidth:hover { border-width: 1px; }
Cheers!
YigitApril 24, 2015 at 6:10 pm #434307Hey! 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.
April 25, 2015 at 6:17 am #434592Hey!
Have you tried the inset box shadow? http://makandracards.com/makandra/12019-css-emulate-borders-with-inset-box-shadows
Regards,
IsmaelApril 25, 2015 at 8:42 am #434630Hay!
Many thanks, Ismael! You rock!
I used http://www.cssmatic.com/box-shadow to generate vadit crossbrowser code. Now it’s perfect!Cheers!
VitalApril 27, 2015 at 4:57 am #434988 -
AuthorPosts
- You must be logged in to reply to this topic.