Title: Button CSS class not working Last modified: January 24, 2019 --- # Button CSS class not working * Resolved [SK](https://wordpress.org/support/users/sooskriszta/) * (@sooskriszta) * [7 years, 4 months ago](https://wordpress.org/support/topic/button-css-class-not-working/) * Hello! I am using the slider in a homepage widget of Genesis theme. * In the “Caption”, I am including a couple of links. And those links are assigned CSS classes of the various buttons in the theme. * However, on the frontend, these “buttons” do not appear as intended. Please advise. * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fbutton-css-class-not-working%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 7 replies - 1 through 7 (of 7 total) * [aky01usa](https://wordpress.org/support/users/aky01usa/) * (@aky01usa) * [7 years, 4 months ago](https://wordpress.org/support/topic/button-css-class-not-working/#post-11126706) * Hi [@sooskriszta](https://wordpress.org/support/users/sooskriszta/) 🙂 * It looks like the CSS isn’t quite right. * Can you send me to a page showing me what you want each button to look like ( as example of each button styling) and I’d be happy to help you determine the correct CSS. * Thanks * Thread Starter [SK](https://wordpress.org/support/users/sooskriszta/) * (@sooskriszta) * [7 years, 4 months ago](https://wordpress.org/support/topic/button-css-class-not-working/#post-11127075) * [https://sooskrisztina.hu](https://sooskrisztina.hu) – slider on top of page. * Buttons should look like on this page: [https://my.studiopress.com/themes/corporate/#demo-full](https://my.studiopress.com/themes/corporate/#demo-full) * Except, different color (orange) as on: [https://sooskrisztina.hu/kapcsolat/](https://sooskrisztina.hu/kapcsolat/) - This reply was modified 7 years, 4 months ago by [SK](https://wordpress.org/support/users/sooskriszta/). * [aky01usa](https://wordpress.org/support/users/aky01usa/) * (@aky01usa) * [7 years, 4 months ago](https://wordpress.org/support/topic/button-css-class-not-working/#post-11127111) * Hi 🙂 * Thank you! So you’re CSS needs to be changed to this: * ``` a.button.white.outline { border-radius: 9em; color: #ffffff; cursor: pointer; font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 1.6rem; display: inline-block; width: auto; line-height: 3em; height: 3em; padding: 0 3.333333em; box-shadow: 0 0.25rem 2rem -0.5rem rgba(255, 255, 255, 0); background: #d93; background: -moz-linear-gradient(-45deg,#d93 0,#d33 100%); background: -webkit-linear-gradient(-45deg,#d93 0,#d33 100%); background: linear-gradient(135deg,#d93 0,#d33 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d93',endColorstr='#d33',GradientType=1); } ``` * Then the 1 button would look like this: * [https://cl.ly/143e9957a67d](https://cl.ly/143e9957a67d) * As for the 2nd button, it’s not picking up any styling as it doesn’t have the same CSS class names. * Thread Starter [SK](https://wordpress.org/support/users/sooskriszta/) * (@sooskriszta) * [7 years, 4 months ago](https://wordpress.org/support/topic/button-css-class-not-working/#post-11127165) * Where should I put the CSS? The theme already has this CSS…that’s how it shows up okay on the contact page… * Thread Starter [SK](https://wordpress.org/support/users/sooskriszta/) * (@sooskriszta) * [7 years, 4 months ago](https://wordpress.org/support/topic/button-css-class-not-working/#post-11127216) * To theme’s custom CSS, I added: * ``` .button.white.outline, button.white.outline, .wp-block-button a.white.outline { color: #ffffff; background: transparent; box-shadow: inset 0 0 0 2px #ffffff; } .soliloquy-caption-inside .button, .soliloquy-caption-inside button, .soliloquy-caption-inside .wp-block-button a { border: 0; border-radius: 9rem; color: #ffffff; cursor: pointer; font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 16px; font-size: 1.6rem; text-decoration: none; white-space: nowrap; display: inline-block; width: auto; line-height: 3em; height: 3em; padding: 0 3.333333em; box-shadow: 0 0.25rem 2rem -0.5rem rgba(255, 255, 255, 0); background: #d93; background: -moz-linear-gradient(-45deg,#d93 0,#d33 100%); background: -webkit-linear-gradient(-45deg,#d93 0,#d33 100%); background: linear-gradient(135deg,#d93 0,#d33 100%); } ``` * [aky01usa](https://wordpress.org/support/users/aky01usa/) * (@aky01usa) * [7 years, 4 months ago](https://wordpress.org/support/topic/button-css-class-not-working/#post-11127232) * And is it showing as expected for you? The only place I would’ve suggested is the Appearance >> Customize >> Additional CSS * Thread Starter [SK](https://wordpress.org/support/users/sooskriszta/) * (@sooskriszta) * [7 years, 4 months ago](https://wordpress.org/support/topic/button-css-class-not-working/#post-11127236) * Yes, thanks, I added to `Appearance >> Customize >> Additional CSS` Viewing 7 replies - 1 through 7 (of 7 total) The topic ‘Button CSS class not working’ is closed to new replies. * ![](https://ps.w.org/soliloquy-lite/assets/icon-256x256.png?rev=979373) * [Slider by Soliloquy - Responsive Image Slider for WordPress](https://wordpress.org/plugins/soliloquy-lite/) * [Frequently Asked Questions](https://wordpress.org/plugins/soliloquy-lite/#faq) * [Support Threads](https://wordpress.org/support/plugin/soliloquy-lite/) * [Active Topics](https://wordpress.org/support/plugin/soliloquy-lite/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/soliloquy-lite/unresolved/) * [Reviews](https://wordpress.org/support/plugin/soliloquy-lite/reviews/) * 7 replies * 2 participants * Last reply from: [SK](https://wordpress.org/support/users/sooskriszta/) * Last activity: [7 years, 4 months ago](https://wordpress.org/support/topic/button-css-class-not-working/#post-11127236) * Status: resolved