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.

How to add buttons in Dubsado

Thanks to a recent update, you can now add buttons in Dubsado without a single line of code.

1. Open up your Dubsado form
2. Drag in a Text Block where-ever you want your button to appear (or use an existing Text Block)
3. Type out the text for your button (i.e. Learn more)
4. Highlight the text
5. Click Formatting Options ()
6. Click Clear all Formatting ()
7. In the same toolbar, click Insert Link () → Button
8. Type in the URL
9. Check "Open in new tab" (you should always do this for linking to external pages)

Now you can leave it like that, but if you want to make it on-brand, read on for some CSS magic!

Add Buttons with HTML Code

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>

How to use CSS to style your Dubsado buttons

Okay, so now we have our button, we're going to use some CSS code to style it up.

To get started:

1. Drag in a Code Block (it can go anywhere).
2. Delete all the sample code
3. Replace with the code below

<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>

CSS Customisations

To better illustrate what each property does, we'll be customising the button below:

Before 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.

Background Color

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;
 }

Add Padding

a.dubsButton {
 padding: 20px;
 }

a.dubsButton {
 padding: 20px 60px 20px 60px;
 }

Text Color

 a.dubsButton {
 color: #a06c50 !important;
 }

Drop Shadow

a.dubsButton {
box-shadow: 4px 4px #dddad4;
 }

Borders

a.dubsButton {
 border: 1px solid #1f1f1f !important;
 }

Sharp Corners

Want to control how round the corners are? This is for sharp corners:

 a.dubsButton {
 border-radius: 0px;
 }

Rounded Corners

And increase the number for more rounded corners:

 a.dubsButton {
 border-radius: 25px;
 }

Update Fonts

For fonts, you can update them straight up in the Dubsado Editor!

Plug-and-Play Codes

Head over to my freebie to grab your free plug-and-play code snippets for your buttons!