Buttons are a great way to guide your clients to relevant pages for them to learn more about you and the work that you do—for example, you might want to link to your about page, portfolio, schedule calendar, etc.
If you're a CSS newbie, then buttons are a great way to dip your toes in with experimenting with CSS!
To really make the most as a beginner, do this on a desktop or laptop (if you're trying to code on a phone—you're nuts, and good luck!). And open up the Dubsado editor full screen.
In full screen mode, you should be able to see both your button and the Code Block. Any code that you change, will affect the button in your form, live. Perfect for playing around and experimenting!
It might be one little feature, but there's tons we could cover with buttons—so I'll be splitting this off into a 2-part series.
In this tutorial, we are going to learn how to add buttons to your Dubsado proposal, and how to do basic customisations with CSS.
We'll be covering colors, borders, background colors, hover effects, box shadows, transitions — and more.
In the second part, we'll be covering hover effects and all the funky stuff we can do with animations and transitions—woop woop!
But first, let's learn the basics.
If you're not fussed on learning CSS and want some pretty buttons, like, within seconds—I've also coded some plug-and-play samples, which you can copy and paste straight into your Dubsado form—without touching a line of code.
But if you do have the time, I'd encourage you to go through this so that you can an idea of how to further customize them yourself.
Thanks to a recent update, you can now add buttons in Dubsado without a single line of code.
Now you can leave it like that, but if you want to make it on-brand, read on for some CSS magic!
In case you'd prefer to include buttons with code, drag in a Code Block and replace the sample code with:
<a href="linkURL" class="primaryButton" target=_blank>text button</a>
Then change your link URL and button text. For example:
<a href="https://searchandgrow.com" class="primaryButton" target=_blank>visit site</a>
Okay, so now we have our button, we're going to use some CSS code to style it up.
To get started:
<style> a.dubsButton { } </style>
Now our Code Block is prepared for our customisations!
The gap in the highlighted row? That's where our customisations are going to go. We'll stack each one on top of each other like this:
<style> a.dubsButton { color: #ffffff; background-color: #000000; box-shadow: none; padding: 10px 22px 10px 22px; } </style>
If you've added a button in manually with the HTML code above, you'll need to change the selector name —substituting a.dubsButton
for a.primaryButton
, like this:
<style> a.primaryButton { color: #ffffff; background-color: #000000; box-shadow: none; padding: 10px 22px 10px 22px; } </style>
To better illustrate what each property does, we'll be customising the button below:
learn moreBefore we begin customising our buttons, you'll need to have your brand color hex codes (a # symbol followed by 6 digits e.g. #000000).
If you don't have any brand colors—or you just want to play around with a random palette—take a look at some of the color palettes available here: Colors and Fonts and HTML Color Codes.
As default, the background color of your button (in Dubsdao) will be the same as the brand color that you entered under Brand Settings:
If you want to change this, then use this following code (you must keep the !important bit at the end).
a.dubsButton { background-color: #a06c50 !important; }
You can either set the same padding for all 4 sides of your button:
learn morea.dubsButton { padding: 20px; }
Or have different padding sizes for each side (top, right, bottom, left):
learn morea.dubsButton { padding: 20px 60px 20px 60px; }
a.dubsButton { color: #a06c50 !important; }
a.dubsButton { box-shadow: 4px 4px #dddad4; }
a.dubsButton { border: 1px solid #1f1f1f !important; }
Want to control how round the corners are? This is for sharp corners:
a.dubsButton { border-radius: 0px; }
And increase the number for more rounded corners:
a.dubsButton { border-radius: 25px; }
For fonts, you can update them straight up in the Dubsado Editor!
Head over to my freebie to grab your free plug-and-play code snippets for your buttons!