shop Dubsado templates →
The Complete Guide to Styling Buttons with CSS (Part 1)
Loading Toc...

The Complete Guide to Styling Buttons with CSS (Part 1)

Last updated // January 19, 2021

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.

  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 (The Complete Guide to Styling Buttons with CSS (Part 1) Search & GrowThe Complete Guide to Styling Buttons with CSS (Part 1) Search & Grow)
  6. Click Clear all Formatting (The Complete Guide to Styling Buttons with CSS (Part 1) Search & Grow)
  7. In the same toolbar, click Insert Link (The Complete Guide to Styling Buttons with CSS (Part 1) Search & GrowThe Complete Guide to Styling Buttons with CSS (Part 1) Search & Grow) → 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!

The Complete Guide to Styling Buttons with CSS (Part 1) Search & Grow

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:

  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>

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

learn more

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.

The Complete Guide to Styling Buttons with CSS (Part 1) Search & Grow
learn more

As default, the background color of your button (in Dubsdao) will be the same as the brand color that you entered under Brand Settings:

The Complete Guide to Styling Buttons with CSS (Part 1) Search & Grow

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 more
a.dubsButton {
 padding: 20px;
 }

Or have different padding sizes for each side (top, right, bottom, left):

learn more
a.dubsButton {
 padding: 20px 60px 20px 60px;
 }
learn more
 a.dubsButton {
 color: #a06c50 !important;
 }
learn more
a.dubsButton {
box-shadow: 4px 4px #dddad4;
 }
learn more
a.dubsButton {
 border: 1px solid #1f1f1f !important;
 }
learn more

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

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

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!

@searchandgrow
© 2023 SEARCH & GROW
|
PRIVACY POLICY
|
Terms of use
|
DESIGNED BY ME ♦
Top