[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
  • #192469


    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.

    I can create ghost buttons with CSS Hero.

    Your thoughts?




    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 🙂



    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



    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


    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 🙂



    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


    Tom Lead Developer

    Try this:




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

    Thanks Tom!

    Dad Kingdom - powered by GeneratePress


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

You must be logged in to reply to this topic.