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

Home Forums Support Creating a Line Divider with a [Button in the middle]

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1281919
    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

    #1282159
    David
    Staff
    Customer Support

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

    #1282997
    David
    Staff
    Customer Support

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

    #1283568
    Mike

    awesome! it works perfectly! thank you!

    #1283818
    David
    Staff
    Customer Support

    You’re welcome – looks good 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.