[Resolved] Two side-by-side buttons

Home Forums Support Two side-by-side buttons

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1247032
    Pamela

    What is the code to create two side-by-side buttons, as shown in the page hero of the Split site demo?

    I can’t seem to import that particular site, so I can’t just get it from there.

    #1247199
    David
    Staff
    Customer Support

    Hi there,

    this is HTML:

    <div class="hero-buttons">
    	<a class="button" href="#">Get Started</a> <a class="button ghost" href="#">Contact Us</a>
    </div>

    And then add this CSS to your site:

    button,
    html input[type="button"],
    input[type="reset"],
    input[type="submit"],
    a.button,
    a.button:visited,
    a.wp-block-button__link:not(.has-background) {
        border: 1px solid transparent;
    }
    
    button.ghost,
    html input[type="button"].ghost,
    input[type="reset"].ghost,
    input[type="submit"].ghost,
    a.button.ghost,
    a.button.ghost:visited,
    a.wp-block-button__link.ghost:not(.has-background) {
        background: transparent;
        color: inherit;
        border-color: inherit;
    }
    
    button.ghost:hover,
    html input[type="button"].ghost:hover,
    input[type="reset"].ghost:hover,
    input[type="submit"].ghost:hover,
    a.button.ghost:hover,
    a.wp-block-button__link.ghost:not(.has-background):hover {
        background: transparent;
        color: #1e73be;
    }
    
    .hero-buttons>* {
        margin: 10px;
    }
    #1247437
    Pamela

    There’s no way I would have ever figured that out. Thank you so much.

    Is there a better way to separate them a bit than by my current method of adding four &nbsp?

    #1247676
    David
    Staff
    Customer Support

    Edit this CSS:

    .hero-buttons>* {
        margin: 10px;
    }

    Increase the 10px

    #1248180
    Pamela

    Perfect! Thank you.

    #1248186
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.