Half underline in button that changes color with text

[deranaloge]

hi there,

is it possible to make some buttons with a line like this? the line is fixed in lentgth and should change the color on mouseover.

thx in advance for your help.

cheers

[nabeel]

Hey Harald,

Thank you for reaching out to us. If you’re using a V2 button element then you can add the following code in the Theme Options > CSS to show a half underline:

.x-anchor-button .x-anchor-text-primary:before {
    content: '';
    width: 50%;
    height: 2px;
    background-color: red;
    position: absolute;
    bottom: 0;
}

.x-anchor-button:hover .x-anchor-text-primary:before {
    background-color: blue;
}

You can change the background-color as per your need. Hope this helps!

[deranaloge]

hi nabeel,

thanks alot for your help! it worked great.

i changed the code a little bit and did seperate classes for each button color. (button => customize => class)

then the code looks something like this:

.bt_white .x-anchor-text-primary:before {
    content: '';
    width: 2.2em;
    height: 3px;
    background-color: white;
    position: absolute;
    bottom: -3px;
}

.bt_white:hover .x-anchor-text-primary:before {
    background-color: white;
}
.bt_grey .x-anchor-text-primary:before {
    content: '';
    width: 2.2em;
    height: 3px;
    background-color: #333333;
    position: absolute;
    bottom: -3px;
}

.bt_grey:hover .x-anchor-text-primary:before {
    background-color: #333333;
}
.bt_orange .x-anchor-text-primary:before {
    content: '';
    width: 2.2em;
    height: 3px;
    background-color: #f9b35b;
    position: absolute;
    bottom: -3px;
}

.bt_orange:hover .x-anchor-text-primary:before {
    background-color: #f9b35b;
}

[jade]

Hi Harald,

That should be fine an glad to hear you got it sorted.

Cheers!