custom code blocks & templates coming soon :: join the beta list

Button Plug & Play Samples

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.

01

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

Drag in a Code Block into your Dubsado form and replace the sample code with the following CSS styles to get the button that you'd like:

Style 01
<style>
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;
}
a.dubsButton:hover {
	text-decoration: none;
}
</style>
Style 02
<style>
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;
}
a.dubsButton:hover {
	text-decoration: none;
}
</style>
Style 03
<style>
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;
}
a.dubsButton:hover {
	text-decoration: none;
}
</style>
Style 04
<style>
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;
}
a.dubsButton:hover {
	text-decoration: none;
}
</style>
Style 05
<style>
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;
}
a.dubsButton:hover {
	text-decoration: none;
}
</style>
Style 06
<style>
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;
}
a.dubsButton:hover {
	text-decoration: none;
}
</style>

03

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:

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

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 styleEmbed
  3. Then highlight the code under "CSS rules to specify families"

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>
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;
}
a.dubsButton:hover {
	text-decoration: none;
}
</style>

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:

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

<style>
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;
}
a.dubsButton:hover {
	text-decoration: none;
}
</style>

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>
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 */
}
a.dubsButton:hover {
	text-decoration: none;
}
</style>
close generator

custom dubsado block

code generator

Button Plug & Play Samples

show me the magic
how to use this code generator
1. Enter your branding elements into the fields. 
2. Press the button to preview your branded Custom Block. 
3. Once you're happy, click the copy code button.
4. Paste your code into your Dubsado form.

your live preview

I'm ready for my code!

STEP 01 :: ENTER YOUR branding elements here

clear fields
© 2020 SEARCH & GROW  |  privacy policy  |  v2.0
© 2020 SEARCH & GROW
|
PRIVACY POLICY
|
DESIGNED BY ME ♦
cross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram