Basic Button Structure

We use the following structure to create buttons:

<a class="btn btn-primary" href="#">Button</a>

This format uses the <a> tag for buttons. While traditionally the <button> element is used for buttons in HTML, we use <a> to allow for easy link navigation, while still maintaining button-like styling. Here’s what each part of this structure means:

1. <a> Tag

The <a> tag is used to define a hyperlink. In our case, we use it for buttons to allow easy navigation when the button is clicked. The href=”#” is a placeholder that should be replaced with the actual URL or link path, such as /contact, /shop, or /ac-installation. This ensures that the button will navigate the user to the correct page. Alternatively, if the button is intended to trigger a JavaScript function (for example, opening a modal or submitting a form), the href can be linked to a relevant action, like href=”javascript:void(0)”. Make sure to always replace the placeholder # with the correct URL or action.

2. class=”btn”

The class btn is applied to all buttons to ensure that they are styled consistently across the application. This class will define the basic appearance of the button, such as padding, border radius, font styles, etc. All buttons with this class will have a standard look and feel that adheres to our design system.

.btn {
  border: 0;
  border-radius: 0;
  padding: 0.75rem 1.5rem;
  font-weight: $medium-weight;
  color: white;
  position: relative;
  &:hover {
    color: white;
  }
  &.border-sm {
    border-radius: 3px;
  }
  &.border-lg {
    border-radius: 10px;
  }
  &.border-xl {
    border-radius: 30px;
  }
  &.btn-sm {
    padding: 0.45rem 1rem;
  }
  &.btn-lg {
    padding: 1.25rem 3rem;
  }
}

3. Button Classes

class=”btn-primary” btn-primary is a specific variation of the general btn class. It is used to define the button’s theme or color.

.btn-primary {
  background: $brand-primary;
  color:#fff;
  &:hover {
    background: lighten($brand-primary, 10%);
    color:#fff;
  }
  &.transparent {
    background:transparent;
    border:3px solid $brand-primary;
    color:$brand-primary;
    &:hover {
      background:$brand-primary;
      color:white;
    }
  }
  &.gradient {
		background: darken($brand-primary, 15%);
		background: linear-gradient(145deg, $brand-primary 0%, darken($brand-primary,15%) 100%);
    &:hover {
	  	background: linear-gradient(145deg, $brand-primary 0%, darken($brand-primary,15%) 100%);
    }
	}
}

We use multiple button types such as:

btn-primary

Button SM
Button Primary
Button LG
Primary Transparent

btn-secondary

Button SM
Button Primary
Button LG
Primary Transparent

btn-accent

Button SM
Button Primary
Button LG
Primary Transparent

btn-light

Button SM
Button Primary
Button LG
Primary Transparent

btn-dark

Button SM
Button Primary
Button LG
Primary Transparent

btn-white

Button SM
Button Primary
Button LG
Primary Transparent

btn-black

Button SM
Button Primary
Button LG
Primary Transparent

btn borders

Button Primary
Border sm
Border lg
Border xl

4. Button Text

The text inside the <a> tag in this case, “Submit” is the label that will be displayed on the button. Always make sure the text is clear, concise, and represents the action that the button will perform.

Example

<a class="btn btn-primary" href="#">Submit</a>

This will render a primary button with the label “Submit”. When clicked, it will trigger the default action (or can be hooked up to JavaScript for custom behavior).

Keyword 2, Keyword 3 & Keyword 1 Geo 1, Geo 2 & Geo 3

Keyword 2, Keyword 3 & Keyword 1 Geo 1, Geo 2 & Geo 3

Keyword 1 in Geo 1 | Keyword 2 Geo 2 | Keyword 3 Geo 3

Keyword 3 ∴ Keyword 2 ∴ Keyword 1 ∴ Geo 2 ∴ Geo 1 ∴ Geo 3