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

[Mike]

Hello,

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

View post on imgur.com

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

[David]

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 */
}

[Mike]

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

[David]

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

[Mike]

awesome! it works perfectly! thank you!

[David]

You’re welcome – looks good 🙂

[Author]

Posts