[Resolved] 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 🙂

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…

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”

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

Thanks Tom!