Community Forums › Forums › Archived Forums › Design Tips and Tricks › Business Pro adding different colored buttons
Tagged: colored buttons
- This topic has 1 reply, 2 voices, and was last updated 6 years, 2 months ago by Victor Font.
-
AuthorPosts
-
February 16, 2018 at 4:00 pm #216612workkyMember
First, the website included is just a test site, it's not what the theme is going on, so dont bash it to hard
Well, i've tried for about two hours to add just one different colored button to business pro and i have failed, the code is this, if you look at the bottom i added an orange button. I have done this many times in my old genesis themes, " Ally, genesis sample etc) and it has worked fine, but this has really got me stumped, it's been a few years since i have had to work with CSS, but we are building a new theme and i need different colored buttons. Any help is appreciated, Thank YOU I did notice in my old theme it has a.button in front of everything
button,
button,
input[type=button],
input[type=reset],
input[type=submit] {
background-color: #141e28;
border: 0;
border-radius: .4rem;
color: #fff;
cursor: pointer;
font-family: Montserrat,Helvetica,Arial,sans-serif;
font-size: 16px;
font-size: 1.6rem;
font-weight: 700;
padding: 1em 2em;
text-decoration: none;
display: inline-block;
width: auto;
height: auto;
line-height: 1;
box-shadow: inset 0 0 0 9rem rgba(255,255,255,0),0 0 0 -1rem rgba(20,30,40,0);
-webkit-transition: all .75s cubic-bezier(0,1,.5,1);
transition: all .75s cubic-bezier(0,1,.5,1)
}button:hover,
button:hover,
input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover {
color: #fff;
box-shadow: inset 0 0 0 9rem rgba(255,255,255,.1),0 1.25rem 1rem -.5rem rgba(20,30,40,.25);
-webkit-transition: all .75s cubic-bezier(0,1,.5,1);
transition: all .75s cubic-bezier(0,1,.5,1)
}
button.accent,
button.accent,
input[type=button].accent,
input[type=reset].accent,
input[type=submit].accent {
background-color: #fb2056
}
button.small,
button.small,
input[type=button].small,
input[type=reset].small,
input[type=submit].small {
font-size: 12px;
font-size: 1.2rem
}
button:disabled,
.button:disabled:hover,
button:disabled,
button:disabled:hover,
input[type=button]:disabled,
input[type=button]:disabled:hover,
input[type=reset]:disabled,
input[type=reset]:disabled:hover,
input[type=submit]:disabled,
input[type=submit]:disabled:hover {
background-color: #f6f7f8;
border-width: 0;
color: #697886;
cursor: not-allowed
}
button + .button,
.button + button,
button + .button,
button + button,
input[type=button] + .button,
input[type=button] + button,
input[type=reset] + .button,
input[type=reset] + button,
input[type=submit] + .button,
input[type=submit] + button {
margin-top: 1em;
clear: both
}button.orange,
button.orange {
background-color: #fd6d16 !important;
color: #fff !important;}
life’s tough, it’s a lot tougher if you’re stupid
My WebsiteFebruary 17, 2018 at 4:54 pm #216726Victor FontModeratorThe Boss Pro theme is not a Studio Press product. It is a community marketplace theme. Community marketplace theme developers support their themes directly. As the creators, they will be most familiar with the theme and be able to provide you with the best support. You can find the resources you need here: https://seothemes.net/support/
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet? -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.