Creating ghost buttons

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

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

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"

Try this:

input[name="jetpack_subscriptions_widget"]

Oh! See, I was trying to add ".button" after the input type, but didn't need to.

Thanks Tom!

You're welcome :)