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.
Drag in a Code Block into your Dubsado form — it can go anywhere you'd like.
Replace the sample code in the Code Block with the following CSS styles to get the button that you'd like:
<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> .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> .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> .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> .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> .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:
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:
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>
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>