Here are the plug and play button styles that you can copy and paste straight into Dubsado and have kick-butt-worthy buttons within a matter of seconds.

Add a Dubsado Button

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)
10. Now you're ready for some CSS magic!

Code Block

Drag in a Code Block into your Dubsado form — it can go anywhere you'd like.

Button Styles

Replace the sample code in the Code Block with the following CSS styles to get the button that you'd like:

Style 01

<style>
.form-viewer a.dubsButton {
	background-color: #000000 !important;
	font-family: 'Lato', sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	padding: 14px 22px;
	border: 1px solid #000000 !important;
	border-radius: 0px;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.form-viewer a.dubsButton:hover {
	text-decoration: none;
}
</style>

Style 02

<style>
.form-viewer a.dubsButton {
	background-color: #000000 !important;
	font-family: 'Lato', sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	padding: 14px 36px;
	border: 1px solid #000000 !important;
	border-radius: 25px;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.form-viewer a.dubsButton:hover {
	text-decoration: none;
}
</style>

Style 03

<style>
.form-viewer a.dubsButton {
	background-color: #000000 !important;
	font-family: 'Lato', sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	padding: 14px 36px;
	border: 1px solid #000000 !important;
	border-radius: 0px;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	box-shadow: 4px 4px #67EACA;
}
.form-viewer a.dubsButton:hover {
	text-decoration: none;
}
</style>

Style 04

<style>
.form-viewer a.dubsButton {
	background-color: #FFFFFF !important;
	color: #000000 !important;
	font-family: 'Lato', sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	padding: 14px 22px;
	border: 1px solid #000000 !important;
	border-radius: 0px;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.form-viewer a.dubsButton:hover {
	text-decoration: none;
}
</style>

Style 05

<style>
.form-viewer a.dubsButton {
	background-color: #FFFFFF !important;
	color: #000000 !important;
	font-family: 'Lato', sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	padding: 14px 36px;
	border: 1px solid #000000 !important;
	border-radius: 25px;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.form-viewer a.dubsButton:hover {
	text-decoration: none;
}
</style>

Style 06

<style>
.form-viewer a.dubsButton {
	background-color: #FFFFFF !important;
	color: #000000 !important;
	font-family: 'Lato', sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	padding: 14px 36px;
	border: 1px solid #000000 !important;
	border-radius: 0px;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	box-shadow: 4px 4px #67EACA;
}
.form-viewer a.dubsButton:hover {
	text-decoration: none;
}
</style>

Customising your Buttons

Okay. so you can plug and play these straight over, or you might prefer to update the fonts and colors to match your branding. If so, here are a few simple customisations that you can make to these:

Update Fonts

You can either update your fonts straight up in the Dubsado text editor or to have more control:

Grab your Font name

Make sure you have your font name to hand (if so, skip ahead to "replace font-family").

If not, choose one from the Google Fonts library. Dubsado is already compatible with Google Fonts and so all you need to do is:

1. Choose your font at Google Fonts
2. Click your chosen font → Select this style → Embed
3. Then highlight the code under "CSS rules to specify families"

Replace font-family

Then find this line in your plug-and-play sample above: font-family: 'Lato'; and replace with the line provided by Google Fonts.

For example:

<style>
.form-viewer a.dubsButton {
	background-color: #000000 !important;
	font-family: 'Roboto', sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	padding: 14px 22px;
	border: 1px solid #000000 !important;
	border-radius: 0px;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.form-viewer a.dubsButton:hover {
	text-decoration: none;
}
</style>

Update Colors

Now you need to get your brand colour's 6 digit hex-code (i.e. #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.

You need to replace my sample hex-codes with your own in:

styles: 01, 02, 04, 05

For these styles, you'll need to replace the colours in 2 different places (I've commented what each one refers to).

<style>
.form-viewer a.dubsButton {
	background-color: #000000 !important;   /* button's background colour */
	font-family: 'Roboto', sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	padding: 14px 22px;
	border: 1px solid #000000 !important;  /* button's border */
	border-radius: 0px;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.form-viewer a.dubsButton:hover {
	text-decoration: none;
}
</style>

STYLES 03 & 06

For these two styles, there's the added accent-coloured drop shadow. So you'll need to replace in 3 different places (I've commented what each one refers to):

<style>
.form-viewer a.dubsButton {
	background-color: #000000 !important;   /* button's background colour */
	font-family: 'Lato', sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	padding: 14px 36px;
	border: 1px solid #000000 !important;   /* button's border */
	border-radius: 0px;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	box-shadow: 4px 4px #67EACA;  /* button's drop shadow - replace with your accent colour */
}
.form-viewer a.dubsButton:hover {
	text-decoration: none;
}
</style>