Evogov Themes Website - Button Samples

Button Samples

Notes: The button samples below can be used in your EvoGov website.
In your website's design theme, there should be a "Buttons" CSS template in the design admin.
If you don't see it listed, let us know and we can add it for you (older websites may not have it yet).
There are base color values in the CSS that can be changed to match your own website's color theme (we can help).
Those color variables let you change the colors of the buttons, including the border, background, text color, and hover color.
The "target=_blank" part of the code shown below is standard HTML that opens your button link in a new tab in the browser.
We are linking to Google.com in the examples below just to demonstrate the functionality of the buttons.
If you need any assistance, please let us know through our live chat system in your CMS.

Simple Button

We created these color options to save you time for most situations. If you need a custom color for you buttons let us know.
To create these button styles, simply add the classes listed below to any hyperlink.

Simple Button Green sample code: <a href="google.com" class="btn-simple-green" target="_blank">Google</a>

Simple Button OceanGreen sample code: <a href="google.com" class="btn-simple-oceangreen" target="_blank">Google</a>

Simple Button Blue sample code: <a href="google.com" class="btn-simple-blue" target="_blank">Google</a>

Simple Button Light Blue sample code: <a href="google.com" class="btn-simple-lightblue" target="_blank">Google</a>

Simple Button Slate sample code: <a href="google.com" class="btn-simple-slate" target="_blank">Google</a>

Simple Button Dark Blue sample code: <a href="google.com" class="btn-simple-darkblue" target="_blank">Google</a>

Simple Button Midnight sample code: <a href="google.com" class="btn-simple-midnight" target="_blank">Google</a>

Simple Button TealBlue sample code: <a href="google.com" class="btn-simple-tealblue" target="_blank">Google</a>

Simple Button Red sample code: <a href="google.com" class="btn-simple-red" target="_blank">Google</a>

Simple Button Orange sample code: <a href="google.com" class="btn-simple-orange" target="_blank">Google</a>

Simple Button Gray sample code: <a href="google.com" class="btn-simple-gray" target="_blank">Google</a>

Simple Button LightGray sample code: <a href="google.com" class="btn-simple-lightgray" target="_blank">Google</a>

Simple Button DarkGray sample code: <a href="google.com" class="btn-simple-darkgray" target="_blank">Google</a>

Simple Button dark sample code: <a href="google.com" class="btn-simple-dark" target="_blank">Google</a>

Simple Button Tan sample code: <a href="google.com" class="btn-simple-tan" target="_blank">Google</a>

Simple Button LightTan sample code: <a href="google.com" class="btn-simple-lighttan" target="_blank">Google</a>

Simple Button Brown sample code: <a href="google.com" class="btn-simple-brown" target="_blank">Google</a>

Simple Button DarkBrown sample code: <a href="google.com" class="btn-simple-darkbrown" target="_blank">Google</a>

Simple Button Gold sample code: <a href="google.com" class="btn-simple-gold" target="_blank">Google</a>

Simple Button GoldenSand sample code: <a href="google.com" class="btn-simple-goldensand" target="_blank">Google</a>

Simple Button SandyBrown sample code: <a href="google.com" class="btn-simple-sandybrown" target="_blank">Google</a>

Simple Button Crusta sample code: <a href="google.com" class="btn-simple-crusta" target="_blank">Google</a>

Simple Button Violet sample code: <a href="google.com" class="btn-simple-violet" target="_blank">Google</a>

Simple Grow Button

This button grows slightly on mouseover.
To create this button, add a class of "btn-grow-colorname" to any hyperlink using the sample code below in code view.

Grow Button sample code: <a href="google.com" class="btn-grow" target="_blank">Google</a>

Grow Button Green sample code: <a href="google.com" class="btn-grow-green" target="_blank">Google</a>

Grow Button OceanGreen sample code: <a href="google.com" class="btn-grow-oceangreen" target="_blank">Google</a>

Grow Button TealBlue sample code: <a href="google.com" class="btn-grow-tealblue" target="_blank">Google</a>

Grow Button Blue sample code: <a href="google.com" class="btn-grow-blue" target="_blank">Google</a>

Grow Button LightBlue sample code: <a href="google.com" class="btn-grow-lightblue" target="_blank">Google</a>

Grow Button DarkBlue sample code: <a href="google.com" class="btn-grow-darkblue" target="_blank">Google</a>

Grow Button Red sample code: <a href="google.com" class="btn-grow-red" target="_blank">Google</a>

Grow Button Orange sample code: <a href="google.com" class="btn-grow-orange" target="_blank">Google</a>

Grow Button Gray sample code: <a href="google.com" class="btn-grow-gray" target="_blank">Google</a>

Grow Button Dark sample code: <a href="google.com" class="btn-grow-dark" target="_blank">Google</a>

Grow Button Tan sample code: <a href="google.com" class="btn-grow-tan" target="_blank">Google</a>

Grow Button Midnight sample code: <a href="google.com" class="btn-grow-midnight" target="_blank">Google</a>

Grow Button Slate sample code: <a href="google.com" class="btn-grow-slate" target="_blank">Google</a>

Grow Button Brown sample code: <a href="google.com" class="btn-grow-brown" target="_blank">Google</a>

Grow Button DarkBrown sample code: <a href="google.com" class="btn-grow-darkbrown" target="_blank">Google</a>

Grow Button Gold sample code: <a href="google.com" class="btn-grow-gold" target="_blank">Google</a>

Grow Button GoldenSand sample code: <a href="google.com" class="btn-grow-goldensand" target="_blank">Google</a>

Grow Button Crusta sample code: <a href="google.com" class="btn-grow-crusta" target="_blank">Google</a>

Grow Button LightTan sample code: <a href="google.com" class="btn-grow-lighttan" target="_blank">Google</a>

Grow Button LightGray sample code: <a href="google.com" class="btn-grow-lightgray" target="_blank">Google</a>

Grow Button DarkGray sample code: <a href="google.com" class="btn-grow-darkgray" target="_blank">Google</a>

Grow Button Violet sample code: <a href="google.com" class="btn-grow-violet" target="_blank">Google</a>

Sliding Button

To create this button, add a class of "btn-slide" to any hyperlink.
In code view, your hyperlink should look like this: <a href="google.com" class="btn-slide" target="_blank">Google</a>

Preview:
Sliding Button

Glow Button

To create this button, add a class of "btn-glow" to any hyperlink.
In code view, your hyperlink code should look like this: <a href="google.com" class="btn-glow" target="_blank">Google</a>

Preview:

Glow Button

Pulse Button

This button is slightly different because instead of using this class on a typical hyperlink, you use it on an HTML button tag. Here is the sample code:
<a href="https://www.google.com" target="_blank"><button><span>Pulse Button</span></button></a>

Preview:

Push Button

To create this button, add a class of "btn-glow" to any hyperlink.
In code view, your hyperlink code should look like this: <a href="google.com" class="btn-push" target="_blank">Google</a>

Preview:

Button Push

Sample CSS

This is a sample of the CSS being called by this page:

/* Sliding Button */
/* a class="btn-slide" */
:root {
--button-text-color-before:#121212;
--button-text-color-hover:#fff;
--btn-border-thickness:3px;
--btn-border-color:rgb(252, 70, 100);
--btn-bg:#eee;
--btn-bg-hover:#333;
--btn-font-size:1rem;
--btn-width-max:280px;
--btn-font-weight:600;
}

/* green - #4B7D43 */
/* oceangreen #5aa786 */
/* tealblue #264653 */
/* blue #0367A6 */
/* lightblue #0E91C9 */
/* darkblue #033859 */
/* red #9E0909 */
/* orange #D96E11 */
/* gray #888D93 */
/* dark #121212 */
/* tan #BFAB93 */
/* midnight #112244 */
/* slate #585C81 */
/* brown #735B46 */
/* darkbrown #40352c */
/* gold #E7A632 */
/* goldensand #e9c46a */
/* crusta #ee8959 */
/* lighttan #f2ceae */
/* lightgray #a6a6a6 */
/* darkgray #262626 */
/* violet #474073 */

/* SIMPLE BUTTONS */
a.btn-simple-green {
background-color: #4B7D43;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-simple-oceangreen {
background-color: #5aa786;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-simple-tealblue {
background-color: #264653;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-simple-blue {
background-color:#0367A6;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-simple-lightblue {
background-color:#0E91C9;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-simple-darkblue {
background-color:#033859;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-simple-red {
background-color:#9E0909;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-simple-orange {
background-color:#D96E11;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-simple-gray {
background-color:#888D93;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-simple-dark {
background-color:#121212;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-simple-tan {
background-color:#BFAB93;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-simple-midnight {
background-color:#112244;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-simple-slate {
background-color:#585C81;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;}
a.btn-simple-brown {
background-color:#735B46;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;}
a.btn-simple-darkbrown {
background-color:#40352c;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;}
a.btn-simple-gold {
background-color:#E7A632;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;}
a.btn-simple-goldensand {
background-color:#e9c46a;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;}
a.btn-simple-sandybrown {
background-color:#f4a261;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;}
a.btn-simple-crusta {
background-color:#ee8959;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;}
a.btn-simple-lighttan {
background-color:#f2ceae;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #121212;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;}
a.btn-simple-lightgray {
background-color:#a6a6a6;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;}
a.btn-simple-darkgray {
background-color:#262626;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;}
a.btn-simple-violet {
background-color:#474073;
display:inline-block;
padding: .5rem 1rem;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}

/* GROW BUTTONS */
a.btn-grow {
background-color: #0367A6;
display:inline-block;
padding: .5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* Green */
a.btn-grow-green {
background-color: #4B7D43;
display:inline-block;
padding: .5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-green:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-green:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* oceangreen #5aa786 */
a.btn-grow-oceangreen {
background-color: #5aa786;
display:inline-block;
padding: .5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-oceangreen:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-oceangreen:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* tealblue #264653 */
a.btn-grow-tealblue {
background-color: #264653;
display:inline-block;
padding: .5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-tealblue:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-tealblue:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* blue #0367A6 */
a.btn-grow-blue {
background-color: #0367A6;
display:inline-block;
padding: .5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-blue:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-blue:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* lightblue #0E91C9 */
a.btn-grow-lightblue {
background-color: #0E91C9;
display:inline-block;
padding: .5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-lightblue:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-lightblue:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* darkblue #033859 */
a.btn-grow-darkblue {
background-color:#033859;
display:inline-block;
padding: .5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-darkblue:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-darkblue:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* red #9E0909 */
a.btn-grow-red {
background-color:#9E0909;
display:inline-block;
padding:.5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-red:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-red:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* orange #D96E11 */
a.btn-grow-orange {
background-color:#D96E11;
display:inline-block;
padding:.5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-orange:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-orange:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* gray #888D93 */
a.btn-grow-gray {
background-color:#888D93;
display:inline-block;
padding:.5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-gray:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-gray:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* dark #121212 */
a.btn-grow-dark {
background-color:#888D93;
display:inline-block;
padding:.5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-dark:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-dark:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* tan #BFAB93 */
a.btn-grow-tan {
background-color:#BFAB93;
display:inline-block;
padding:.5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-tan:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-tan:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* midnight #112244 */
a.btn-grow-midnight {
background-color:#112244;
display:inline-block;
padding:.5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-midnight:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-midnight:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* slate #585C81 */
a.btn-grow-slate {
background-color:#585C81;
display:inline-block;
padding:.5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-slate:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-slate:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* brown #735B46 */
a.btn-grow-brown {
background-color:#735B46;
display:inline-block;
padding:.5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-brown:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-brown:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* darkbrown #40352c */
a.btn-grow-darkbrown {
background-color:#40352c;
display:inline-block;
padding:.5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-darkbrown:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-darkbrown:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* gold #E7A632 */
a.btn-grow-gold {
background-color:#E7A632;
display:inline-block;
padding:.5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-gold:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-gold:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* goldensand #e9c46a */
a.btn-grow-goldensand {
background-color:#e9c46a;
display:inline-block;
padding:.5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-goldensand:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-goldensand:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* crusta #ee8959 */
a.btn-grow-crusta {
background-color:#ee8959;
display:inline-block;
padding:.5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-crusta:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-crusta:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* lighttan #f2ceae */
a.btn-grow-lighttan {
background-color:#f2ceae;
display:inline-block;
padding:.5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-lighttan:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-lighttan:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* lightgray #a6a6a6 */
a.btn-grow-lightgray {
background-color:#a6a6a6;
display:inline-block;
padding:.5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-lightgray:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-lightgray:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* darkgray #262626 */
a.btn-grow-darkgray {
background-color:#262626;
display:inline-block;
padding:.5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-darkgray:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-darkgray:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}
/* violet #474073 */
a.btn-grow-violet {
background-color:#474073;
display:inline-block;
padding:.5rem 1rem;
border: 0;
border-radius: 30px;
color: #ffffff;
font-weight: 600;
transition: all 0.5s;
text-decoration:none;
width:max-content;
max-width:var(--btn-width-max);
text-transform:uppercase;
text-align:center;
}
a.btn-grow-violet:hover {
filter: brightness(1.3);
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
webkit-transform: scale(1.1);
}
a.btn-grow-violet:active {
filter: brightness(1);
transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
webkit-transform: scale(0.98);
}

/* Slide Button */
a.btn-slide {
display: inline-block;
padding: .5rem 1rem;
font-size: var(--btn-font-size);
font-weight: 700;
color: var(--button-text-color-before);
border: var(--btn-border-thickness) solid var(--btn-border-color);
border-radius:10px;
cursor: pointer;
position: relative;
background-color: var(--btn-bg);
text-decoration: none;
overflow: hidden;
z-index: 1;
font-family: inherit;
width:max-content;
max-width:200px;
text-transform: uppercase;
}
a.btn-slide::before {
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--btn-bg-hover);
transform: translateX(-100%);
transition: all .3s;
z-index: -1;
color:#fff !important;
}
a.btn-slide:hover::before {
transform: translateX(0);
color: #fff !important;
}
a.btn-slide:hover {color:var(--button-text-color-hover);}

/* Glow Button */
a.btn-glow {
position: relative;
padding: .5rem 1rem;;
border-radius: 10px;
border: var(--btn-border-thickness) solid var(--btn-border-color);
font-size: var(--btn-font-size);
background: var(--btn-bg);
color: var(--button-text-color-before);
width:max-content;
max-width:200px;
text-transform: uppercase;
font-weight: 600;
text-decoration:none;

overflow: hidden;
box-shadow: 0 0 0 0 transparent;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
a.btn-glow:hover {
background: var(--btn-bg-hover);
box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
color:var(--button-text-color-hover);
}
a.btn-glow:hover::before {
-webkit-animation: sh02 0.5s 0s linear;
-moz-animation: sh02 0.5s 0s linear;
animation: sh02 0.5s 0s linear;
}
a.btn-glow::before {
content: '';
display: block;
width: 0px;
height: 86%;
position: absolute;
top: 7%;
left: 0%;
opacity: 0;
background: #fff;
box-shadow: 0 0 50px 30px #fff;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
}
@keyframes sh02 {
from {opacity: 0;left: 0%;}
50% {opacity: 1;}
to {opacity: 0;left: 100%;}
}
a.btn-glow:active {
box-shadow: 0 0 0 0 transparent;
-webkit-transition: box-shadow 0.2s ease-in;
-moz-transition: box-shadow 0.2s ease-in;
transition: box-shadow 0.2s ease-in;
}

/* Pulse Button */
button.btn-pulse {
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);
overflow: hidden;
cursor: pointer;
position: relative;
padding: 1rem 1.5rem;;
border: none;
font-size: var(--btn-font-size);
background: #183153;
color: #fff;
width:max-content;
max-width:200px;
text-transform: uppercase;
font-weight: 600;
text-decoration:none;

}
button.btn-pulse:after {
content: " ";
width: 0%;
height: 100%;
background: #ffd401;
position: absolute;
transition: all 0.4s ease-in-out;
right: 0;
}
button.btn-pulse:hover::after {
right: auto;
left: 0;
width: 100%;
}
button.btn-pulse span {
text-align: center;
text-decoration: none;
width: 100%;
color: ;
font-size: 1.1rem;
font-weight: 700;
z-index: 20;
transition: all 0.3s ease-in-out;
}
button.btn-pulse:hover span {
color: #183153;
animation: scaleUp 0.3s ease-in-out;
}
@keyframes scaleUp {
0% {transform: scale(1);}
50% {transform: scale(0.95);}
100% {transform: scale(1);}
}

/* Push Button */
a.btn-push {
color: #ecf0f1;
font-size: 1.1rem;
background-color: #e67e22;
border: 1px solid #f39c12;
border-radius: 10px;
padding: .5rem 1rem;
box-shadow: 0px 6px 0px #d35400;
transition: all .1s;
text-transform: uppercase;
font-weight: 600;
text-decoration:none;
width:max-content;
max-width:200px;
}
a.btn-push:active {
box-shadow: 0px 2px 0px #d35400;
position: relative;
top: 2px;
}