shop Dubsado templates →
Button Plug & Play Code Snippets
Loading Toc...

Button Plug & Play Code Snippets

Last updated // January 24, 2023

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.

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 LinkButton
  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!
Button Plug & Play Code Snippets Search & Grow

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

Button Plug & Play Code Snippets Search & Grow
<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

Button Plug & Play Code Snippets Search & Grow
<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

Button Plug & Play Code Snippets Search & Grow
<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

Button Plug & Play Code Snippets Search & Grow
<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

Button Plug & Play Code Snippets Search & Grow
<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

Button Plug & Play Code Snippets Search & Grow
<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>

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

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>
@searchandgrow
© 2023 SEARCH & GROW
|
PRIVACY POLICY
|
Terms of use
|
DESIGNED BY ME ♦
Top