Hi Be Team
I was just wondering how you setup the buttons like your typography sample?
have attached an image of the button that I mean


Thank you in advance


  • Hi,

    button styles can be changed under Theme options > Global > General section.
  • I see where you can change the button style, but how do you make one of these buttons change to a full color background with white text when it's hovered over to look like the 4th row of buttons (the ones shown in jry19's comment above) on this page: http://themes.muffingroup.com/betheme/shortcodes/typography#buttons

    Here's where I'm trying to do that: http://www.basiccon.org/register-2/

    Also, I'm using the client shortcode and would like the bottom bar that shows up when you hover over it to be a blue color like you see in the first row of the client ones here: http://themes.muffingroup.com/betheme/shortcodes/loops/

    Here's the page I'm trying to do that on: http://www.basiccon.org/sponsors/
  • 1. For these Stroke buttons, we used the following css:
    [button title="Default button" icon="" icon_position="left" link="" target="_blank" color="turquoise" large="0" class=""]
    We have some pre-defined colors and that's the these buttons got different bg color on hover. If you want, you can change this bg on hover with custom css as well.

    2. The color of this line, you can change with:
    ul.clients.clients_tiles li .client_wrapper::after { border-bottom-color: #000 !important; }
  • Ok, I tried that and now a hover color shows up, but it's gray even though I told it to use the color #29aae2 in the CSS you gave me. 

    Also, you can see that I'm using Javascript so when you click on the button it pops up a box in the window for people to register for our event. However, the page then refreshes like clicking the button is linking to somewhere else. I've tried changing the target code of the button to everything but can't figure it out. Any thoughts?
  • 1. May we know where this button exactly is on your site?

    2. We also need link to page where this button is.
  • Thank muffin team
    managed to change it under theme settings as advised.

    takamineman > Hope you get yours sorted buddy
    feel free to keep posting in this thread.

    Hope others will find it useful :)

    best regards

  • Sorry for the delay. I was on vacation. Here's the link to where my button is: http://www.basiccon.org/register-2/

    Scroll down until you see the button that says "Register Now"
  • Hi,

    This CSS code is a little complicated but works:
    a.button.button_js.button_stroke_custom:hover:not(.action_button) {
      background-color: #ff0000 !important;
  • Ok, that fixed my hover color for the button, but I'm still having a problem with the Javascript. 

    When you click on the button a box should pop up for you to register. I've done this using this Javascript on other websites before without any problem, but for some reason when I do it on this theme it pops up the box and then reloads the page. Can you help me figure out why it would be reloading the page please?
  • Sorry, but we can't offer you support with custom scripts

  • What I'm trying to say is that I don't think the problem has anything to do with the custom script. I've used this custom script before on other websites and had no problems. The script is super simple and used for embedding, so it shouldn't be causing the page to reload.

    I think the problem has something to do with the way the button reacts when clicked. I've removed the link specifications, but that doesn't seem to have fixed it.
  • I have checked with the company that provides the javascript for this and they confirmed that it has nothing to do with the script. They said, "You have an `href` attribute on your link. Just remove it and it should work."

    As I mentioned, I did remove the link specifications in the code for the button. My code looks like this: [button title="Register Now" icon="" icon_position="" color="#29aae2" large="0" class="guestlist-event-399144"]

    Do I need to add some custom css to stop it from linking if that's causing the page to reload?
  • I figured it out. I added link="#" and that fixed it.
Sign In or Register to comment.