Kadence - Rounded buttons in Kadence
Ever wondered if you can create rounded buttons in Kadence? You certainly can! We'll show you how in this tutorial.
Global button settings
If you're wanting every button to be rounded, start by heading to Appearance > Customize > Colors & Fonts > Buttons.
Look for the "Border Radius" setting and set it to your desired roundedness. You can adjust the value as needed to get the look you want! The maximum border radius value is 100px.
Individual button settings
You've set the border radius globally for your buttons, but maybe you're still seeing buttons with sharp corners. These buttons may not be set to inherit the theme styles and/or may have a custom border radius set. Or, maybe you only want one button to have rounded corners and all your other buttons to stay as-is. This is where individual button settings come in!
To change the border radius for a single button, go to Pages > All Pages. Open the page in the editor and click on the Button block you'd like to update. On the right, you'll see a "Single Button" settings panel appear. Click on the Style tab, then look for the "Border Radius" setting. Set the value(s) to your desired roundedness.
Read more button
Since the Read More button in your 17th Avenue Kadence theme is technically a link and not a button, it won't inherit the global button styles. However, you can still achieve a rounded appearance for your Read More buttons by following these simple steps.
- Click here and copy the code.
- Go to Appearance > Customize > Additional CSS and paste the code in the box.
- Adjust the 100px value to your preferred border radius, then Publish.