button

jry19 · December 2015

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

Albert · December 2015

Hi,

button styles can be changed under Theme options > Global > General section.

takamineman · December 2015

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/

Albert · December 2015

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; }

takamineman · December 2015

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?

Albert · December 2015

1. May we know where this button exactly is on your site?

2. We also need link to page where this button is.

jry19 · December 2015

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

takamineman · January 2016

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"

Albert · January 2016

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;
}

takamineman · January 2016

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?

Albert · January 2016

Sorry, but we can't offer you support with custom scripts

Thanks!

takamineman · January 2016

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.

takamineman · January 2016

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?

takamineman · January 2016

I figured it out. I added link="#" and that fixed it.

Albert · January 2016

Hi,

Its nice to hear

button

Comments