[chinnailuParticipant]

Hello,
I am trying to implement the buttons and the colors defined on this page http://theme.co/x/demo/ethos/1/shortcodes/buttons/

I want to get the same colors like the one under 3D Pill Yellow ( see attached). I am not able to understand how to put the shortcode. Are these gradients and colors of buttons pre-defined and can I leverage that ? Also, how can I use other colors on that page ?

I am using the below, but does not work. Should I use class as yellow or ?? I see that when I see the inspect in browser, it show x-btn-yellow, is that pre-defined or need to define ?

[button type=”real” shape=”pill” class=”yellow” style=”;text-decoration: none” size=”large” href=”#Temp” title=”Example”] [icon type=”clock-o”]
Button [/button]

[ChristopherModerator]

Hi there,

Please update your shortcode to :

[x_button type="real" shape="pill" class="x-btn-yellow" style=";text-decoration: none" size="jumbo" href="#Temp" title="Example"] [icon type="clock-o"]
Button [/x_button]

Add this CSS as well to customizer :

.x-btn-yellow {
    -webkit-box-shadow: 0 0.25em 0 0 #dd9933, 0 4px 9px rgba(0, 0, 0, 0.75);
    box-shadow: 0 0.25em 0 0 #dd9933, 0 4px 9px rgba(0, 0, 0, 0.75) !important;
  -moz-box-shadow: 0 0.25em 0 0 #dd9933, 0 4px 9px rgba(0, 0, 0, 0.75);
  color: #000;
    border-color: #d6a700;
    background-color: #ffba00;
}
.x-btn-yellow:hover {
    color: #fff;
    border-color: #d6a700;
    background-color: #ffba00;
}

Hope it helps.

[chinnailuParticipant]

Thanks, I was wondering that there were strandard codes and CSS 🙂

Anyways, the given code does not work. I ended up using the below that work…

.my-btn-yellow {
  color: #000;
  border-color: #d6a700;
  background-color: #ffba00;
}

.my-btn-yellow:hover {
  color: #fff;
  border-color: #d6a700;
  background-color: #ffba00;
}

 .x-btn.x-btn-real.my-btn-yellow {
  -webkit-box-shadow: 0 0.25em 0 0 #dd9933, 0 4px 9px rgba(0, 0, 0, 0.75);
          box-shadow: 0 0.25em 0 0 #dd9933, 0 4px 9px rgba(0, 0, 0, 0.75);
}

[ChristopherModerator]

Glad to hear that you were able to fix this.

Thanks for sharing.

[Author]

Posts