How to Change a Button Styles

11 posts from 2 voices

• Started 9 months ago by dnelsonuf
• Latest reply from Ismael
• This topic is not a support question

Tags:

• Choices

1. 

   dnelsonuf
   Member

   I have been trying to change the css to create a new button or change the orange button style all together. Ideally I would like this style of button for the orange button:

   button.css3button {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: #ffffff;
   padding: 10px 20px;
   background: -moz-linear-gradient(
   top,
   #ff8a1d 0%,
   #ff8001);
   background: -webkit-gradient(
   linear, left top, left bottom,
   from(#ff8a1d),
   to(#ff8001));
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   border: 1px solid #dd6b01;
   -moz-box-shadow:
   0px 1px 3px rgba(000,000,000,0.5),
   inset 0px 0px 2px rgba(255,255,255,0.7);
   -webkit-box-shadow:
   0px 1px 3px rgba(000,000,000,0.5),
   inset 0px 0px 2px rgba(255,255,255,0.7);
   box-shadow:
   0px 1px 3px rgba(000,000,000,0.5),
   inset 0px 0px 2px rgba(255,255,255,0.7);
   text-shadow:
   0px -1px 0px rgba(000,000,000,0.2),
   0px 1px 0px rgba(255,255,255,0.3);
   }

   Where would I enter this css, or how can I edit buttons for the Choices theme. I tried entering the specific hex color in the buttons shortcode menu when asked for background color but that has no change on the button at all and it defaults to either gray or the standard theme color button when I make changes like that. Please let me know as I would like to have some custom buttons.

   Thanks,
   Doug

   Posted 9 months ago #
2. 

   Ismael
   Moderator

   Hi,

   On the shortcode button, add a special class on it. Then on your custom.css, add the style that you wanted.

   Regards,
   Ismael

   Posted 9 months ago #
3. 

   dnelsonuf
   Member

   Sorry I am a bit novice at this could you explain a bit more, possibly provide an example?

   Thanks!

   Posted 8 months ago #
4. 

   Ismael
   Moderator

   Hi dnelsonuf,

   Go to the Content Editor(this is where you place the content of your page or post), you will see the shortcode button, after you have generated the short code, the button code will look something like this:
   [button link="http://kriesi.at"]Purchase[/button]
   just add a class, let's name it my_special_button, the new code should look something like this:
   [button link="http://kriesi.at" class="my_special_button"]Purchase[/button]
   Then go to: wp-content/themes/choices/css/custom.css or you can just go to Quick CSS and add the styling to your button, just integrate your code above, it should look something like this:
   

   .my_special_button {
      color: #000;
   }

   Just replace the attributes and you can replace the name of the class. Hope this helps. :)

   Regards,
   Ismael

   Posted 8 months ago #
5. 

   dnelsonuf
   Member

   This still has made no changes to my register button, here is the page: http://www.staging-sealtrainingadventures.com/programs/seal-adventure-challenge/

   I tried both ways once by entering it in the custom.css and then I tried it in the Quick CSS as well. Neither way worked the button color did not change even when I tried simply entering a color: for the css instead of all the stuff above?

   What is going on it looks like the themes styles are overriding whatever I put in there?

   Posted 8 months ago #
6. 

   Ismael
   Moderator

   Hi dnelsonuf,

   Is the register button you want to change? You can use this selector:
   

   .avia-button.register {
   
   }

   Hope this helps. :)

   Regards,
   Ismael

   Posted 8 months ago #
7. 

   dnelsonuf
   Member

   Thank you, that worked! One last question how would I apply a hover and active state to that button? The first part of css works great its just the hover and active states that don't seem to be working correctly now:

   .avia-button.register {
   color: #fef4e9;
   border: solid 1px #da7c0c;
   background: #f78d1d;
   background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
   background: -moz-linear-gradient(top, #faa51a, #f47a20);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
   }
   .avia-button.register , .avia-button.register:hover {
   background: #f47c20;
   background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
   background: -moz-linear-gradient(top, #f88e11, #f06015);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
   }
   .avia-button.register:active {
   color: #fcd3a5;
   background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
   background: -moz-linear-gradient(top, #f47a20, #faa51a);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
   }

   Thanks for all the help!

   Posted 8 months ago #
8. 

   Ismael
   Moderator

   Hi,

   Just add a hover style on this

   .avia-button.register:hover  {
   
   }

   Regards,
   Ismael

   Posted 8 months ago #
9. 

   dnelsonuf
   Member

   I have tried that in the quick CSS and it does not work, this is what I put in there below the button style:

   .avia-button.register:hover{
   color: #fff
   background: #f47c20;
   background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
   background: -moz-linear-gradient(top, #f88e11, #f06015);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
   }

   On hover the font changes to gray and not white like it is specified in the above css?

   Posted 8 months ago #
10. 

    dnelsonuf
    Member

    Any idea on how to fix this? as you can see it still isn't working the way it should on that page.

    Posted 8 months ago #
11. 

    Ismael
    Moderator

    Hi dnelsonuf,

    You forgot to add a semi-colon(;) after the color: #fff. Try to add the semi-colon, and it should work. If not, try to add the !important. :)

    Regards,
    Ismael

    Posted 8 months ago #

RSS feed for this topic

Reply

You must log in to post.