Title: Adding a button: button class Last modified: December 5, 2017 --- # Adding a button: button class * Resolved [zapa2005](https://wordpress.org/support/users/zapa2005/) * (@zapa2005) * [8 years, 5 months ago](https://wordpress.org/support/topic/adding-a-button-button-class/) * I am looking at adding a button. I am taking the example of the theme and using“ inspect element”, I am looking at the demo page: [https://shoreditchdemo.wordpress.com/?demo](https://shoreditchdemo.wordpress.com/?demo) * I am not too sure how to use the element: [Button](https://my.site.link) . This is HTML and not CSS and I can not add it right away (I understand button minimal is a pre-defined class that can be “plugged in”). * Further inspecting the demo page, I see: .button.minimal:before, .button.alt: before { border: 2px solid; border-radius: 5em; content: “”; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; * Should I use this instead? And, in the customiser, how to define where I want to use this button? * I am getting my head round CSS and starting with this might not be the easiest. So apols if I am on the wrong track! * Tks for your help. * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fadding-a-button-button-class%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 10 replies - 1 through 10 (of 10 total) * Thread Starter [zapa2005](https://wordpress.org/support/users/zapa2005/) * (@zapa2005) * [8 years, 5 months ago](https://wordpress.org/support/topic/adding-a-button-button-class/#post-9751924) * I meant to say: * _I am not too sure how to use the element: Button which, using the inspect element, is shown using: class=”button minimal” href=”[https://shoreditchdemo.wordpress.com?demo”>Button](https://shoreditchdemo.wordpress.com?demo”>Button)_ * [sacredpath](https://wordpress.org/support/users/sacredpath/) * (@sacredpath) * Automattic Happiness Engineer * [8 years, 5 months ago](https://wordpress.org/support/topic/adding-a-button-button-class/#post-9762255) * Hi there, if you go to the [Shoreditch Theme Showcase page](https://wordpress.com/theme/shoreditch) at WordPress.com, and scroll down to Extras, it explains how to set up buttons in your pages and posts. * Thread Starter [zapa2005](https://wordpress.org/support/users/zapa2005/) * (@zapa2005) * [8 years, 5 months ago](https://wordpress.org/support/topic/adding-a-button-button-class/#post-9764438) * God, I can’t believe I missed this. What an oversight. Looking stupid on this one. Tks for pointing it out. Actually, brings one question. Easy to add on a page. But any idea how to add the button in the widget section? I can not use the HTML editor in a widget as far as I understand? * Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/) * (@zoonini) * [8 years, 5 months ago](https://wordpress.org/support/topic/adding-a-button-button-class/#post-9764738) * [@zapa2005](https://wordpress.org/support/users/zapa2005/) Yes, you can add button code to a widget area. I’d recommend the new Custom HTML widget for this. Let us know how it goes. * Thread Starter [zapa2005](https://wordpress.org/support/users/zapa2005/) * (@zapa2005) * [8 years, 5 months ago](https://wordpress.org/support/topic/adding-a-button-button-class/#post-9764809) * This is fantastic Kathryn. All done. Tks a mil. I am trying to reduce the space between the text and the button. I have added this custom CSS but not sure it works. Any idea what would work better? * /* reduce padding of fancy a chat*/ * .widget.widget_text { padding-bottom: 1em; } * Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/) * (@zoonini) * [8 years, 5 months ago](https://wordpress.org/support/topic/adding-a-button-button-class/#post-9764921) * Could you link to a a page or post with a button in the widget? I spot-checked but not seeing one. Thanks! * Thread Starter [zapa2005](https://wordpress.org/support/users/zapa2005/) * (@zapa2005) * [8 years, 5 months ago](https://wordpress.org/support/topic/adding-a-button-button-class/#post-9764935) * Sorry, I didn’t specify. It’s the widget at the bottom of the page, blue rectangle“ Fancy a chat”. It appears on all pages. * It’s really a tiny thing reducing this padding thing but will help me understand what I missed. * Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/) * (@zoonini) * [8 years, 5 months ago](https://wordpress.org/support/topic/adding-a-button-button-class/#post-9765043) * Thanks for pointing it out! * I’m not quite sure why you’re using two separate widgets in that area – you only need the HTML widget for both the paragraph of text and the button. * I would first start by moving your text above the button in the HTML widget and see how that looks. We can then tweak as needed! * Thread Starter [zapa2005](https://wordpress.org/support/users/zapa2005/) * (@zapa2005) * [8 years, 5 months ago](https://wordpress.org/support/topic/adding-a-button-button-class/#post-9765099) * I see what I’ve done! Makes sense. Done, simplified. That actually makes it better, removed the large area underneath the text. This is great. Thanks Kathryn, I’ll close it here as it fixed it. * Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/) * (@zoonini) * [8 years, 5 months ago](https://wordpress.org/support/topic/adding-a-button-button-class/#post-9768497) * Looks good! Viewing 10 replies - 1 through 10 (of 10 total) The topic ‘Adding a button: button class’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/shoreditch/1.2.2/screenshot.png) * Shoreditch * [Support Threads](https://wordpress.org/support/theme/shoreditch/) * [Active Topics](https://wordpress.org/support/theme/shoreditch/active/) * [Unresolved Topics](https://wordpress.org/support/theme/shoreditch/unresolved/) * [Reviews](https://wordpress.org/support/theme/shoreditch/reviews/) * 10 replies * 3 participants * Last reply from: [Kathryn Presner](https://wordpress.org/support/users/zoonini/) * Last activity: [8 years, 5 months ago](https://wordpress.org/support/topic/adding-a-button-button-class/#post-9768497) * Status: resolved