[Resolved] Creating ghost buttons

Home Forums Support [Resolved] Creating ghost buttons

Home Forums Support Creating ghost buttons

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.

    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
    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…

    #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…

    #215326
    Tom
    Lead Developer
    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/&#8221;
    <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”

    #215335
    Tom
    Lead Developer
    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!

    #215344
    Tom
    Lead Developer
    Lead Developer

    You’re welcome πŸ™‚

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