Close

Account

Documentation

Forum

Menu

Reply To: Text Slider Button Style

Post count: 22
Clint Mallon
October 24, 2014 at 5:06 pm #5631

Great, thank you. And just in case anyone out there is trying to do the same, here’s the custom css needed to take care of:

1. Body buttons normal and hover
2. Gravity Forms buttons normal and hover
3. Text Slider and Parallax slider buttons normal and hover

The code below is for the Flat Style and I’m using the font Libre Baskerville:

/* DEFAULT BUTTON COLOR AND STYLE */
.calloutinner.text-normal .btn,
input[type=”submit”],
.gform_wrapper .gform_footer input.button,
.gform_wrapper .gform_footer input[type=submit],
.btn.btn-info,
.text-slider .btn {
padding: 14px 24px;
font-size: 13px !important;
font-weight: bold;
font-family: Libre Baskerville;
text-transform: uppercase;
letter-spacing: 0.2em;
text-shadow: none;
background-color: #58ADBE;
color: #FFFFFF;
border: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
-webkit-box-shadow: inset 0 -3px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 -3px rgba(0,0,0,0.1);
box-shadow: inset 0 -3px rgba(0,0,0,0.1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

/* DEFAULT BUTTON HOVER COLOR */
.btn.btn-info:hover,
.gform_wrapper .gform_footer input.button:hover,
.gform_wrapper .gform_footer input[type=submit]:hover,
.text-slider .btn:hover,
.text-slider .btn:active {
background: #1A6469;
color: #fff;
}

/* DISABLE THE BUTTON SLIDING EFFECT FOR PARALLAX AND TEXT SLIDERS */
.slider-button:after,
.text-slider .btn:after {
display:none;
}

/* PARALLAX SLIDER BUTTON COLOR */
.slider-button {
padding: 14px 24px;
font-size: 13px !important;
font-weight: bold;
font-family: Libre Baskerville;
text-transform: uppercase;
letter-spacing: 0.2em;
text-shadow: none;
background-color: #58ADBE;
color: #FFFFFF;
border: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 -3px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 -3px rgba(0,0,0,0.1);
box-shadow: inset 0 -3px rgba(0,0,0,0.1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

/* PARALLAX SLIDER BUTTON HOVER COLOR */
.slider-button:hover {
background: #1A6469;
color: #fff;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}

/* PARALLAX SLIDER BUTTON HOVER TEXT COLOR */
.slider-button:hover .button-text {
color: #fff;
}