How to change buttons CSS? - Support | Kriesi.at

Tagged: button, CSS

Viewing 5 posts - 31 through 35 (of 35 total)

← 1 2

Author

Posts
February 20, 2015 at 8:44 am #399488

Josue
Inactive Moderator

Yes, if you want me to check it i’d need a FTP account (not a cPanel account). Also, i noted you are running an older version of Enfold, please update the theme to the latest version (3.0.8).

Regards,
Josue

February 20, 2015 at 9:05 am #399495

newtonlinchen
Participant

This reply has been marked as private.

February 21, 2015 at 8:48 pm #400119

Andy
Inactive Moderator

Hey!

please provide us FTP access to check.

Cheers!
Andy

February 6, 2019 at 6:20 am #1063458

thecreativepatch
Participant

Hi I would like to change my button css to the following but not sure how to select it once it’s save to my child theme:
Is there a way I can have a cool button like this with enfold?
/****
* button
*
*/
.button, .button–primary, .button–secondary, .wrapped-input button, .wrapper-input button, .wrapped-input–inverse button, .wrapped-input–date button, .beer-list-item__wrapped-input button, .button–secondary-red, .button–alternative, .button–hero {
font-family: “Neusa-Bold”, sans-serif;
background: white;
color: #000;
cursor: pointer;
display: inline-block;
letter-spacing: 0.01em;
line-height: 1em;
padding: 0;
position: relative;
text-decoration: none;
text-transform: uppercase;
transition: color .2s ease-in-out, border-color .2s ease-in-out; }
.button:before, .button–primary:before, .button–secondary:before, .wrapped-input button:before, .wrapper-input button:before, .wrapped-input–inverse button:before, .wrapped-input–date button:before, .beer-list-item__wrapped-input button:before, .button–secondary-red:before, .button–alternative:before, .button–hero:before, .button:after, .button–primary:after, .button–secondary:after, .wrapped-input button:after, .wrapper-input button:after, .wrapped-input–inverse button:after, .wrapped-input–date button:after, .beer-list-item__wrapped-input button:after, .button–secondary-red:after, .button–alternative:after, .button–hero:after {
transition: color .2s ease-in-out, border-color .2s ease-in-out; }
.button:focus, .button–primary:focus, .button–secondary:focus, .wrapped-input button:focus, .wrapper-input button:focus, .wrapped-input–inverse button:focus, .wrapped-input–date button:focus, .beer-list-item__wrapped-input button:focus, .button–secondary-red:focus, .button–alternative:focus, .button–hero:focus {
outline: none; }
.button:focus, .button–primary:focus, .button–secondary:focus, .wrapped-input button:focus, .wrapper-input button:focus, .wrapped-input–inverse button:focus, .wrapped-input–date button:focus, .beer-list-item__wrapped-input button:focus, .button–secondary-red:focus, .button–alternative:focus, .button–hero:focus, .button:hover, .button–primary:hover, .button–secondary:hover, .wrapped-input button:hover, .wrapper-input button:hover, .wrapped-input–inverse button:hover, .wrapped-input–date button:hover, .beer-list-item__wrapped-input button:hover, .button–secondary-red:hover, .button–alternative:hover, .button–hero:hover {
border-color: #1c1c1c;
color: #1c1c1c; }
.button:focus:before, .button–primary:focus:before, .button–secondary:focus:before, .wrapped-input button:focus:before, .wrapper-input button:focus:before, .wrapped-input–inverse button:focus:before, .wrapped-input–date button:focus:before, .beer-list-item__wrapped-input button:focus:before, .button–secondary-red:focus:before, .button–alternative:focus:before, .button–hero:focus:before, .button:hover:before, .button–primary:hover:before, .button–secondary:hover:before, .wrapped-input button:hover:before, .wrapper-input button:hover:before, .wrapped-input–inverse button:hover:before, .wrapped-input–date button:hover:before, .beer-list-item__wrapped-input button:hover:before, .button–secondary-red:hover:before, .button–alternative:hover:before, .button–hero:hover:before {
border-right-color: #1c1c1c; }
.button:focus:after, .button–primary:focus:after, .button–secondary:focus:after, .wrapped-input button:focus:after, .wrapper-input button:focus:after, .wrapped-input–inverse button:focus:after, .wrapped-input–date button:focus:after, .beer-list-item__wrapped-input button:focus:after, .button–secondary-red:focus:after, .button–alternative:focus:after, .button–hero:focus:after, .button:hover:after, .button–primary:hover:after, .button–secondary:hover:after, .wrapped-input button:hover:after, .wrapper-input button:hover:after, .wrapped-input–inverse button:hover:after, .wrapped-input–date button:hover:after, .beer-list-item__wrapped-input button:hover:after, .button–secondary-red:hover:after, .button–alternative:hover:after, .button–hero:hover:after {
border-top-color: #1c1c1c; }
.button–primary {
border: solid 0.125em #000;
position: relative;
box-shadow: 0 0.5625em 0 -0.3125em;
font-size: 2rem;
padding: 0.46875em;
overflow: visible; }
.button–primary:after, .button–primary:before {
top: calc(100% + 0.125em);
position: absolute;
display: block;
content: “”;
border-style: solid; }
.button–primary:before {
border-width: 0 0.3125em 0.25em 0;
border-color: transparent #000 transparent transparent;
left: -0.125em; }
.button–primary:after {
border-width: 0.25em 0.3125em 0 0;
border-color: #000 transparent transparent transparent;
right: -0.125em; }
.button–primary:focus, .button–primary:hover {
box-shadow: 0 0.5em 0 -0.3125em;
-webkit-transform: translateY(0.0625em);
transform: translateY(0.0625em); }
.button–primary:focus:before, .button–primary:focus:after, .button–primary:hover:before, .button–primary:hover:after {
bottom: -0.3125em; }
.button–primary:focus:before, .button–primary:hover:before {
border-width: 0 0.3125em 0.1875em 0; }
.button–primary:focus:after, .button–primary:hover:after {
border-width: 0.1875em 0.3125em 0 0; }
.button–primary:active {
box-shadow: 0 0.4375em 0 -0.3125em;
-webkit-transform: translateY(0.125em);
transform: translateY(0.125em); }
.button–primary:active:before {
border-width: 0 0.3125em 0.125em 0;
bottom: -0.25em; }
.button–primary:active:after {
border-width: 0.125em 0.3125em 0 0;
bottom: -0.25em; }
.button–secondary, .wrapped-input button, .wrapper-input button, .wrapped-input–inverse button, .wrapped-input–date button, .beer-list-item__wrapped-input button {
border: solid 0.1818181818em #000;
position: relative;
box-shadow: 0 0.6818181818em 0 -0.4090909091em;
font-size: 1.375rem;
padding: 0.4545454545em 0.6818181818em;
margin-bottom: 0.625em; }
.button–secondary:after, .wrapped-input button:after, .wrapper-input button:after, .wrapped-input–inverse button:after, .wrapped-input–date button:after, .beer-list-item__wrapped-input button:after, .button–secondary:before, .wrapped-input button:before, .wrapper-input button:before, .wrapped-input–inverse button:before, .wrapped-input–date button:before, .beer-list-item__wrapped-input button:before {
top: calc(100% + 0.1818181818em);
position: absolute;
display: block;
content: “”;
border-style: solid; }
.button–secondary:before, .wrapped-input button:before, .wrapper-input button:before, .wrapped-input–inverse button:before, .wrapped-input–date button:before, .beer-list-item__wrapped-input button:before {
border-width: 0 0.4545454545em 0.2727272727em 0;
border-color: transparent #000 transparent transparent;
left: -0.1818181818em; }
.button–secondary:after, .wrapped-input button:after, .wrapper-input button:after, .wrapped-input–inverse button:after, .wrapped-input–date button:after, .beer-list-item__wrapped-input button:after {
border-width: 0.2727272727em 0.4545454545em 0 0;
border-color: #000 transparent transparent transparent;
right: -0.1818181818em; }
.button–secondary:before, .wrapped-input button:before, .wrapper-input button:before, .wrapped-input–inverse button:before, .wrapped-input–date button:before, .beer-list-item__wrapped-input button:before, .button–secondary:after, .wrapped-input button:after, .wrapper-input button:after, .wrapped-input–inverse button:after, .wrapped-input–date button:after, .beer-list-item__wrapped-input button:after {
bottom: -0.4545454545em; }
.button–secondary:focus, .wrapped-input button:focus, .wrapper-input button:focus, .wrapped-input–inverse button:focus, .wrapped-input–date button:focus, .beer-list-item__wrapped-input button:focus, .button–secondary:hover, .wrapped-input button:hover, .wrapper-input button:hover, .wrapped-input–inverse button:hover, .wrapped-input–date button:hover, .beer-list-item__wrapped-input button:hover {
box-shadow: 0 0.6363636364em 0 -0.4545454545em;
-webkit-transform: translateY(0.0909090909em);
transform: translateY(0.0909090909em); }
.button–secondary:focus:before, .wrapped-input button:focus:before, .wrapper-input button:focus:before, .wrapped-input–inverse button:focus:before, .wrapped-input–date button:focus:before, .beer-list-item__wrapped-input button:focus:before, .button–secondary:hover:before, .wrapped-input button:hover:before, .wrapper-input button:hover:before, .wrapped-input–inverse button:hover:before, .wrapped-input–date button:hover:before, .beer-list-item__wrapped-input button:hover:before {
border-width: 0 0.4545454545em 0.1818181818em 0;
bottom: -0.3636363636em; }
.button–secondary:focus:after, .wrapped-input button:focus:after, .wrapper-input button:focus:after, .wrapped-input–inverse button:focus:after, .wrapped-input–date button:focus:after, .beer-list-item__wrapped-input button:focus:after, .button–secondary:hover:after, .wrapped-input button:hover:after, .wrapper-input button:hover:after, .wrapped-input–inverse button:hover:after, .wrapped-input–date button:hover:after, .beer-list-item__wrapped-input button:hover:after {
border-width: 0.1818181818em 0.4545454545em 0 0;
bottom: -0.3636363636em; }
.button–secondary:active, .wrapped-input button:active, .wrapper-input button:active, .wrapped-input–inverse button:active, .wrapped-input–date button:active, .beer-list-item__wrapped-input button:active {
box-shadow: 0 0.5454545455em 0 -0.4545454545em;
-webkit-transform: translateY(0.1818181818em);
transform: translateY(0.1818181818em); }
.button–secondary:active:before, .wrapped-input button:active:before, .wrapper-input button:active:before, .wrapped-input–inverse button:active:before, .wrapped-input–date button:active:before, .beer-list-item__wrapped-input button:active:before {
border-width: 0 0.4545454545em 0.0909090909em 0;
bottom: -0.2727272727em; }
.button–secondary:active:after, .wrapped-input button:active:after, .wrapper-input button:active:after, .wrapped-input–inverse button:active:after, .wrapped-input–date button:active:after, .beer-list-item__wrapped-input button:active:after {
border-width: 0.0909090909em 0.4545454545em 0 0;
bottom: -0.2727272727em; }
.button–secondary-red {
border: solid 0.1818181818em #e40421;
position: relative;
box-shadow: 0 0.6818181818em 0 -0.4090909091em;
font-size: 1.375rem;
padding: 0.4545454545em 0.6818181818em;
margin-bottom: 0.625em;
color: #e40421;
transition: none; }
.button–secondary-red:after, .button–secondary-red:before {
top: calc(100% + 0.1818181818em);
position: absolute;
display: block;
content: “”;
border-style: solid; }
.button–secondary-red:before {
border-width: 0 0.4545454545em 0.2727272727em 0;
border-color: transparent #e40421 transparent transparent;
left: -0.1818181818em; }
.button–secondary-red:after {
border-width: 0.2727272727em 0.4545454545em 0 0;
border-color: #e40421 transparent transparent transparent;
right: -0.1818181818em; }
.button–secondary-red:before, .button–secondary-red:after {
bottom: -0.4545454545em; }
.button–secondary-red:focus, .button–secondary-red:hover {
box-shadow: 0 0.6363636364em 0 -0.4545454545em;
-webkit-transform: translateY(0.0909090909em);
transform: translateY(0.0909090909em); }
.button–secondary-red:focus:before, .button–secondary-red:hover:before {
border-width: 0 0.4545454545em 0.1818181818em 0;
bottom: -0.3636363636em; }
.button–secondary-red:focus:after, .button–secondary-red:hover:after {
border-width: 0.1818181818em 0.4545454545em 0 0;
bottom: -0.3636363636em; }
.button–secondary-red:active {
box-shadow: 0 0.5454545455em 0 -0.4545454545em;
-webkit-transform: translateY(0.1818181818em);
transform: translateY(0.1818181818em); }
.button–secondary-red:active:before {
border-width: 0 0.4545454545em 0.0909090909em 0;
bottom: -0.2727272727em; }
.button–secondary-red:active:after {
border-width: 0.0909090909em 0.4545454545em 0 0;
bottom: -0.2727272727em; }
.button–secondary-red:before, .button–secondary-red:after {
transition: none; }
.button–secondary-red:focus, .button–secondary-red:hover {
border-color: #fb0726;
color: #fb0726; }
.button–secondary-red:focus:before, .button–secondary-red:hover:before {
border-right-color: #fb0726; }
.button–secondary-red:focus:after, .button–secondary-red:hover:after {
border-top-color: #fb0726; }
.button–alternative {
border: solid 0.1818181818em #000;
position: relative;
background: #e40421;
box-shadow: #000 0 0.6818181818em 0 -0.4090909091em;
color: #fff;
font-size: 1.375rem;
padding: 0.4545454545em 0.6818181818em; }
.button–alternative:after, .button–alternative:before {
top: calc(100% + 0.1818181818em);
position: absolute;
display: block;
content: “”;
border-style: solid; }
.button–alternative:before {
border-width: 0 0.4545454545em 0.2727272727em 0;
border-color: transparent #000 transparent transparent;
left: -0.1818181818em; }
.button–alternative:after {
border-width: 0.2727272727em 0.4545454545em 0 0;
border-color: #000 transparent transparent transparent;
right: -0.1818181818em; }
.button–alternative:before, .button–alternative:after {
bottom: -0.4545454545em; }
.button–alternative:focus, .button–alternative:hover {
box-shadow: #000 0 0.6363636364em 0 -0.4545454545em;
color: #fff;
-webkit-transform: translateY(0.0909090909em);
transform: translateY(0.0909090909em); }
.button–alternative:focus:before, .button–alternative:hover:before {
border-width: 0 0.4545454545em 0.1818181818em 0;
bottom: -0.3636363636em; }
.button–alternative:focus:after, .button–alternative:hover:after {
border-width: 0.1818181818em 0.4545454545em 0 0;
bottom: -0.3636363636em; }
.button–alternative:active {
box-shadow: #000 0 0.5454545455em 0 -0.4545454545em;
-webkit-transform: translateY(0.1818181818em);
transform: translateY(0.1818181818em); }
.button–alternative:active:before {
border-width: 0 0.4545454545em 0.0909090909em 0;
bottom: -0.2727272727em; }
.button–alternative:active:after {
border-width: 0.0909090909em 0.4545454545em 0 0;
bottom: -0.2727272727em; }
.button–hero {
border: solid 0.1818181818em #000;
position: relative;
background: #e40421;
box-shadow: 0 0.8181818182em 0 -0.4545454545em;
line-height: 0.7272727273em;
font-size: 1.375rem; }
.button–hero:after, .button–hero:before {
top: calc(100% + 0.1818181818em);
position: absolute;
display: block;
content: “”;
border-style: solid; }
.button–hero:before {
border-width: 0 0.4545454545em 0.3636363636em 0;
border-color: transparent #000 transparent transparent;
left: -0.1818181818em; }
.button–hero:after {
border-width: 0.3636363636em 0.4545454545em 0 0;
border-color: #000 transparent transparent transparent;
right: -0.1818181818em; }
.button–hero:after {
display: table;
clear: both;
content: “”; }
.button–hero:before, .button–hero:after {
bottom: -0.5909090909em; }
.button–hero:focus, .button–hero:hover {
box-shadow: #000 0 0.6363636364em 0 -0.4545454545em;
color: #fff;
-webkit-transform: translateY(0.0909090909em);
transform: translateY(0.0909090909em); }
.button–hero:focus:before, .button–hero:hover:before {
border-width: 0 0.4545454545em 0.1818181818em 0;
bottom: -0.3636363636em; }
.button–hero:focus:after, .button–hero:hover:after {
border-width: 0.1818181818em 0.4545454545em 0 0;
bottom: -0.3636363636em; }
.button–hero:active {
box-shadow: 0 0.5454545455em 0 -0.4545454545em;
-webkit-transform: translateY(0.1818181818em);
transform: translateY(0.1818181818em); }
.button–hero:active:before {
border-width: 0 0.4545454545em 0.0909090909em 0;
bottom: -0.2727272727em; }
.button–hero:active:after {
border-width: 0.0909090909em 0.4545454545em 0 0;
bottom: -0.2727272727em; }
.button–hero .pre-cta {
background: #fff;
border-right: solid 0.1818181818em #000;
float: left;
padding: 0.6363636364em 0.9090909091em 0.6363636364em 0.6818181818em; }
.button–hero .pre-cta-title,
.button–hero .pre-cta-desc {
display: block; }
.button–hero .pre-cta-title {
margin-bottom: 0.4090909091em; }
.button–hero .pre-cta-desc {
font-size: 1rem; }
.button–hero .cta {
color: #fff;
float: right;
padding: 0.8181818182em 1.3636363636em 0.8181818182em 0.9090909091em; }
.button–hero .icon {
float: left;
margin-right: 0.6818181818em; }
.button–hero .text {
float: left;
line-height: 1.3636363636em; }

February 7, 2019 at 8:24 am #1063906

Rikard
Keymaster

Hi thecreativepatch,

What are you looking to achieve?

Best regards,
Rikard
Author

Posts

Viewing 5 posts - 31 through 35 (of 35 total)

← 1 2

You must be logged in to reply to this topic.