CSS Tips, Forms

Back to Blog

Styling your Dubsado Package Select Buttons

Dubsado’s default package select button isn’t exactly the most exciting. They’ll do the job, but when you’ve spent hours creating beautiful forms you want every aspect to be perfect. This tutorial will help you style your Dubsado package select buttons so they match your brand perfectly! Here’s how mine looks both selected and unselected. There […]

Dubsado’s default package select button isn’t exactly the most exciting. They’ll do the job, but when you’ve spent hours creating beautiful forms you want every aspect to be perfect. This tutorial will help you style your Dubsado package select buttons so they match your brand perfectly!

Here’s how mine looks both selected and unselected.

There are three main aspects to styling the package select button. When the button is unselected, when you hover and when it is selected. 

Style the button when it’s unselected

Firstly, let’s choose how the button should look when it is unselected. 

/* Package button unselected */
.form-package-element .btn.btn-squared.border-around {
    color: red;
    text-transform: uppercase;
    font-weight: bold;
    padding: 15px 25px;
    border-color:red;
    border-width:4px;
    border-radius:0px;
}

This will mean that:

  • The button will have red uppercase bold text. 
  • The button will have padding inside (15px on the top and bottom and 25px on the left and right) to make it a bit bigger. 
  • It will also have a red border that is 4px wide.
  • Finally, it will have no border-radius, which means there will be no round corners. The higher the radius the more round your button will be.

You can remove any declarations that aren’t relevant to you, and you can also add new ones if you’d like! For example, you may want all your buttons to be 200px wide. Simply add the following:

<em>width:200px;</em>

Style the button on hover

The button on hover will automatically inherit the code we just added for the main button unselected styles, so you don’t need to add the code again if you aren’t planning for the button to change when it is hovered over. I.e. if I want the border-radius to always be 0px, I can just tell it once. You only need to add code for any changes you’d like the button to show when hovered. However, if you do tell it the same thing twice that won’t cause a problem. 

/* Package button unselected hover */
.form-package-element .packageNotSelected .btn.btn-squared.border-around:hover {
	background-color: green!important;
	border-color:green!important;
	color:white!important;
}

This will mean that:

  • The button will change to have white text.
  • The button will get a green background and border

Style the button when it’s been selected

Like with the hover styling, the button will inherit the styles from the unselected button. Therefore, you’ll only need to update the code for aspects that you are changing. It’s important to make sure it’s really obvious that your package has been selected. There are a few ways to do this, such as changing the background colour and changing the text to ‘selected’. It’s also worth noting that you won’t see the package select styles within the Dubsado form editor even if the package is pre-selected, you’ll only see it when you are viewing the form. 

/* Package button selected --- use !important and repeat any style changes you made to the unselected button */
.form-package-element .packageSelected .btn.btn-squared.border-around {
	background-color: blue!important;
	border-color:blue!important;
	color:white!important;
}

Changing the button text

By default Dubsado’s package buttons have the text: select. There is a little CSS hack that will allow you to update the button text to say selected when it has been selected. Simply add the following code:

/* Change button text to selected */
.form-package-element .packageSelected .btn.btn-squared.border-around:after{
       content: "ED";
}

Adding some animation

Adding animation is a really simple way to bring some extra life to your forms to make them more dynamic. Adding transitions to your buttons will help make your proposals even smoother. Simply by adding a transition declaration to each of the button CSS codes you can have a nice fade when the button changes colour. To change the speed of the fade, simply update the number of seconds it takes in the CSS code below. 

transition: 0.5s;

For example:

/* Display when unselected */
.form-package-element .packageNotSelected .btn.btn-squared.border-around {
color: red;
text-transform: uppercase;
font-weight: bold;
padding: 15px 25px;
border-color:red;
border-width:4px;
border-radius:0px;
transition: 0.5s;
}

Easy Peasy! Now that your Dubsado package select buttons are perfectly styled, why not style your package tables next!

Menu

Search...

My Portal