[Resolved] Creating ghost buttons

Home Forums Support Creating ghost buttons

This topic contains 8 replies, has 3 voices, and was last updated by  Tom 3 years, 6 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #192469

    Richard

    Hi Tom,
    I want to create ghost buttons on my website.

    Does GP have any special way to do this now?

    I could not find any ghost buttons plugin.

    I know it can be done by adding css to my theme.
    http://www.wpbeginner.com/wp-themes/how-to-add-css-ghost-buttons-in-your-wordpress-theme/

    I can create ghost buttons with CSS Hero.

    Your thoughts?

    Thanks.

    Dick

    #192517

    Tom Lead Developer

    Pretty easy with some CSS and HTML.

    Your button: Ghost button

    Your CSS:

    .button.ghost {
        background-color: transparent;
        border: 1px solid #FFF;
        color: #222222;
    }
    
    .button.ghost:hover {
        background-color: #FFFFFF;
    }

    Something like that should work 🙂

    #215301

    Heath

    How about CSS for replacing the “Load More Posts” blog/masonry button with a ghost button? Maybe that option (and “Read More” ghost button) could be integrated into GP Premium… 🙂

    Something with div class “masonry-load-more load-more” I presume…

    And, I guess the “Loading…” button as well…

    Dad Kingdom - powered by GeneratePress

    #215317

    Heath

    I think I got it, by editing: .masonry-load-more .button {xyz

    But, now I can’t figure out the Jetpack blog subscriptions widget button…

    Dad Kingdom - powered by GeneratePress

    #215326

    Tom Lead Developer

    If you right click on the button and click “Inspect”, it should show you the class you need to target.

    I think added some more styling options to buttons in GP is a good idea 🙂

    #215330

    Heath

    Hmmm… I’m having a hard time figuring out the class for the “subscribe” button. Jetpack is harder to figure out than your “Load More” button.

    <div class=”inside-right-sidebar”
    <aside id=”text-9″ class=”widget inner-padding widget_text”
    <aside id=”blog_subscription-3″ class=”widget inner-padding jetpack_subscription_widget”
    <form action=”#” method=”post” accept-charset=”utf-8″ id=”subscribe-blog-blog_subscription-3″
    <p id=”subscribe-submit”
    <input type=”hidden” name=”action” value=”subscribe”
    <input type=”hidden” name=”source” value=”http://www.dadkingdom.com/category/toys/”
    <input type=”hidden” name=”sub-type” value=”widget”
    <input type=”hidden” name=”redirect_fragment” value=”blog_subscription-3″
    <input type=”hidden” id=”_wpnonce” name=”_wpnonce” value=”597c3ae7cf”
    <input type=”submit” value=”SUBSCRIBE” name=”jetpack_subscriptions_widget”

    Dad Kingdom - powered by GeneratePress

    #215335

    Tom Lead Developer

    Try this:

    input[name="jetpack_subscriptions_widget"]

    #215338

    Heath

    Oh! See, I was trying to add “.button” after the input type, but didn’t need to.

    Thanks Tom!

    Dad Kingdom - powered by GeneratePress

    #215344

    Tom Lead Developer
Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.