Archived topic

Creating a Line Divider with a [Button in the middle]

5 replies · Started by Mike on May 12, 2020

Viewing posts 1–6 of 6

May 12, 2020 at 10:45 pm #1281919

Hello,

Would it be possible to create a divider with a button in the middle like this

So with the catalyst template, I am able to create a divider and I am able to create a button. But I am not sure how to combine the two like the example

Thanks

May 13, 2020 at 3:57 am #1282159

Hi there,

try adding this HTML to your content:

<div class="button-flex-container">
    <span class="divider"><!-- divider --></span>
    <a class="button" href="#">Button</a>
    <span class="divider"><!-- divider --></span>
</div>

Then add this CSS:

.button-flex-container {
    display: flex;
    align-items: center;
}
.button-flex-container .divider {
    flex: 1;
    height: 1px;
    background-color: #ff0000; /* Change color of divider line */
}

May 13, 2020 at 11:15 am #1282990

Thanks. I edited the original post with my site url.
I put the html to my content (under Odaibai) and I put the css using simple css. Not able to see the line for some reason
Thank you

May 13, 2020 at 11:21 am #1282997

Ooops fixed the CSS here and i changed the line color to red so it can be seen.

May 13, 2020 at 9:58 pm #1283568

awesome! it works perfectly! thank you!

May 14, 2020 at 3:53 am #1283818

You're welcome - looks good :)

This archived topic is closed to new replies.

Start building better websites today.