Home › Forums › Support › Creating ghost buttons This topic has 8 replies, 3 voices, and was last updated 7 years, 7 months ago by Tom. Viewing 9 posts - 1 through 9 (of 9 total) Author Posts May 7, 2016 at 7:47 am #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 May 7, 2016 at 10:26 am #192517 TomLead 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 π August 3, 2016 at 12:15 pm #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… August 3, 2016 at 1:07 pm #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… August 3, 2016 at 1:45 pm #215326 TomLead 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 π August 3, 2016 at 2:08 pm #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” August 3, 2016 at 2:38 pm #215335 TomLead Developer Lead Developer Try this: input[name="jetpack_subscriptions_widget"] August 3, 2016 at 2:47 pm #215338 Heath Oh! See, I was trying to add “.button” after the input type, but didn’t need to. Thanks Tom! August 3, 2016 at 2:49 pm #215344 TomLead Developer Lead Developer You’re welcome π Author Posts Viewing 9 posts - 1 through 9 (of 9 total) You must be logged in to reply to this topic. Log In Username: Password: Keep me signed in Log In