Question

In a log-in/register box I have to separate two buttons with a text like this.

With my HTML code being:

<button class="facebookSux">Ingresa con Facebook</button>
<label>o si prefieres</label>
<button class="register">Regístrate con tus datos</button>

How can I get the horizontal line for the label only with CSS?

One solution that I have considered is using a linear gradient appropriately but there have to be a more elegant way to achieve this.

Answer 1

I assume there is a container around these three tags that can be styled too, in which case I propose this solution.

Markup (unaltered):

<div>
    <button>Ingresa con Facebook</button>
    <label>o si prefieres</label>
    <button>Regístrate con tus datos</button>
</div>

Style sheet:

div {
    width: 250px;
    text-align: center;
    overflow: hidden;
}
button {
    width: 100%;
}
label {
    padding: 0 1em;
    position: relative;
}
label::before,
label::after {
    width: 125px; /* =250/2 */
    height: 0;
    border-top: 1px solid #000;
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 100%;
}
label::after {
    left: 100%;
}