Buttons

With this snippet, you can change the look of your buttons.

 

Note: You will need to change the font size of the arrows, to be able to align them correctly to your desired font.

This snippet also affects social icons, as they're also buttons. Any changes to social buttons need to also be placed under this snippet to overwrite the styling.

You will need to place the content of this snippet in the same order, to be able to differentiate the small buttons from the large ones.

 

Special note! If you use the Playfair or Lora skin, you will need to scroll down to the Playfair or Lora snippet!

Small button

1) Small button style (font color, font size, background color)

2) Small button style - Hover (font color, background color)

3) Small button arrow (font color, font size)

4) Small button arrow - Hover (font color)
 

Large button

5) Large button style (font color, font size, background color)

6) Large button style - hover (font color, background color)

7) Large button arrow (font color, font size)

8) Large button arrow - hover (font color)

 

Large button without background

9) Large button w/o background (font size, font color)

10) Large button w/o background - hover (font color)

11) Large button w/o background arrow (font size, font color)

12) Large button w/o background arrow - hover (font color)

/* BUTTONS */

/* Small Buttons */

/* Small button style */
.btn{
    background: #0fad59;
    color: #fff;
    font-size: 16px;
}

/* Small button style - hover */
.btn:hover{
    background: #20ce6d;
    color: #fff;
}

/* Small button style arrow */
.btn-arrow:before{
    color: #fff;
    font-size: 16px !important;
}

/* Small button style arrow - hover */
.btn-arrow:hover:before{
    color: #fff;
}

/* Large Buttons */

/* Large button style */
.btn-large{
    background: #30517d;
    color: #fff;
    font-size: 25px;
}

/* Large button style - hover */
.btn-large:hover{
    background: #4573b2;
    color: #fff;
}

/* Large button style arrow */
.btn-large.btn-arrow:before{
    color: #fff;
    font-size: 25px !important;
}

/* Large button style arrow - hover */
.btn-large.btn-arrow:hover:before{
    color: #fff;
}

/* Large Buttons without background */

/* Large button w/o background style */
.btn-link.btn-large{
    color: #bd6509 !important;
    font-size: 25px;
}

/* Large button w/o background style - hover */
.btn-link.btn-large:hover{
    color: #fa8c16 !important;
}

/* Large button w/o background style arrow */
.btn-link.btn-arrow:before{
    color: #bd6509;
    font-size: 25px !important;
}

/* Large button w/o background style arrow - hover */
.btn-link.btn-arrow:hover:before{
    color: #fa8c16;
}
Copy to clipboard

Playfair buttons

Small button

1) Small button style (font color, font size, border color / type / width)

2) Small button style - Hover (font color, border color / type / width)

3) Small button arrow (font color, font size)

4) Small button arrow - Hover (font color)
 

Large button

5) Large button style (font color, font size, border color / type / width)

6) Large button style - hover (font color, border color / type / width)

7) Large button arrow (font color, font size)

8) Large button arrow - hover (font color)

 

Large button without border

9) Large button w/o border (font size, font color)

10) Large button w/o border - hover (font color)

11) Large button w/o border arrow (font size, font color)

12) Large button w/o border arrow - hover (font color)

/* BUTTONS - Playfair skin*/

/* Small Buttons */

/* 1) Small button style */
.btn{
    color: #073e54 !important;
    font-size: 16px;
    border: 1px solid #073e54 !important;
}

/* 2) Small button style - hover */
.btn:hover{
    color: #2ecc71 !important;
    border: 1px solid #2ecc71 !important;
}

/* 3) Small button style arrow */
.btn-arrow:before{
    color: #073e54;
    font-size: 16px !important;
}

/* 4) Small button style arrow - hover */
.btn-arrow:hover:before{
    color: #2ecc71;
}

/* Large Buttons */

/* 5) Large button style */
.btn-large{
    color: #30517d !important;
    font-size: 25px;
    border: 2px solid #30517d !important;
}

/* 6) Large button style - hover */
.btn-large:hover{
    color: #4573b2 !important;
    border: 2px solid #fe5858 !important;
}

/* 7) Large button style arrow */
.btn-large.btn-arrow:before{
    color: #30517d;
    font-size: 25px !important;
}

/* 8) Large button style arrow - hover */
.btn-large.btn-arrow:hover:before{
    color: #4573b2;
}

/* Large Buttons without border */

/* 9) Large button w/o border style */
.btn-link.btn-large{
    color: #4573b2 !important;
    font-size: 25px;
    border: none !important;
}

/* 10) Large button w/o border style - hover */
.btn-link.btn-large:hover{
    color: #fe5858 !important;
    border: none !important;
}

/* 11) Large button w/o border style arrow */
.btn-link.btn-arrow:before{
    color: #4573b2;
    font-size: 25px !important;
}

/* 12) Large button w/o border style arrow - hover */
.btn-link.btn-arrow:hover:before{
    color: #fe5858;
}
Copy to clipboard

Lora buttons

Small buttons

1) Small button style (font color, background)

2) Small button style - Hover (font color, background)

 

Large buttons

5) Large button style (font color, background)

6) Large button style - hover (font color, background)

/* BUTTONS - Lora skin */

/* Small buttons */
/* 1) Small buttons - Normal state */
.button .button-normal,
.button .button-arrow,
.readmore .button{
	background-color: #00b4a9;
	color: #fff;
}

/* 2) Small buttons - Hover state */
.button .button-normal:hover,
.button .button-arrow:hover,
.readmore .button:hover{
	background-color: #007d4d;
	color: #fff;
}


/* Large buttons */
/* 3) Large buttons - Normal state */
.external .btn-large,
.external-product .btn-large,
.verticalnav li a,
.call a,
.btn-call:before,
.btn-email:before{
	background-color: #00b4a9;
	color: #fff;
	/* Transitions */
	webkit-transition: all 400ms ease-in;
    -moz-transition: all 400ms ease-in;
    -o-transition: all 400ms ease-in;
    -ms-transition: all 400ms ease-in;
    transition: all 400ms ease-in;
}

/* 4) Large buttons - Hover state */
.external .btn-large:hover,
.verticalnav li a:hover,
.external-product .btn-large:hover,
.call a:hover,
.btn-call:hover:before,
.btn-email:hover:before{
	background-color: #007d4d;
	color: #fff;
	/* Transitions */
	webkit-transition: all 400ms ease-in;
    -moz-transition: all 400ms ease-in;
    -o-transition: all 400ms ease-in;
    -ms-transition: all 400ms ease-in;
    transition: all 400ms ease-in;
}
Copy to clipboard

Round corners on all buttons


This snippet will apply round corners to all buttons.

Note: Border Radius is not supported in IE7 and IE8.

/* Round corners on all buttons */
.btn, .btn-large{
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
Copy to clipboard