Bubble button element guide

Introduction to Buttons in Bubble

This Bubble tutorial video is a guide to buttons because you're going to be hard-pressed to create a Bubble app that doesn't have a single button in it. So Bubble provides a visual element button and I've dragged an example on the page here and I can rename it by clicking up here, rename it to "click here" and let's preview that.

Button Hover Effects

Okay and you can see that when my mouse goes over it the button background color changes and that's an important bit of user experience and part of your UI design to show that something is clickable. So how do I change that? Well one way to change it would be to go in conditional statements and to go this button is hovered and then background color and to choose something that stands out.

Using Button Styles

Okay but you might have spotted that it says that this button is hovered is a property defined in the style of the primary button. So across your app you're going to have different fonts, different colors but you're likely to have at least the primary button and perhaps a secondary button. So Bubble provides a style for primary button if I click edit here I get all of the elements here that Bubble has a style associated to them with a label in this case primary button and this allows me to make changes and to highlight it I'm going to create more than one version and then go back into edit style and let's go for a green darker so it's still readable and if I go back to design you can see that because these buttons both have the same style label primary button the change to the style has affected both buttons.

Customizing Button Hover Effects

So what if I wanted to change what happens when the mouse is hovered over it so I go into conditional this time this button is hovered and let's make it a lighter green. How do I know that the text is still going to be readable I can use this toggle here and it shows me what the button will look like when this condition is applied. I can also go into appearance and I can set up a transition. This is defining whether the change from one background color to another when the button is hovered whether that happens instantly or whether there's like a delay a duration like an animation to it so let's increase that so it's a bit more visible and easier to see refresh the page and now you can see that there's a much slower effect when I put my mouse over the button and that actually looks rather good.

Making Buttons Unclickable

What else can I do with buttons? Well you can make a button not clickable so in conditional statements I can say when current user name is Matt it's a bit of a silly example this element is unclickable and so I can tick that and then that would mean that when my mouse goes over the element and this statement is true it doesn't give me the okay it means that the button is not clickable and so this can be useful in showing a user that an action is possible but maybe it's not possible until they fill out the rest of the form.

Protecting Workflows with Button Conditions

There is a bit dimension here about protecting your workflow say for example this is my workflow so when the button is clicked I want to sign the user up and I've got no other fields but I'll leave that blank just for this demo and I only want in fact let's put some fields in because it's a bit easier to illustrate so I'm going to call this email and password and let's delete this other one name is sign up okay so I don't want my button to be clickable unless input email value is not empty and input password is not sorry value value is not empty this button becomes unclickable so let's try that so what we got we have got is not empty oh wrong way around haven't I so is empty because I want it to become unclickable oh that's why it was acting weird so you can see now that my hover effect still takes effect but the button is unclickable if I remove this condition you can see that because the browse of the text that is clickable and that Bubble provides the code to indicate that I get the hand icon is still at the arrow icon when I go over it incidentally if you are creating a form like this I would make sure that you've got is not empty ticked for both of these and but then also that the button isn't clickable because what you can do there is if I go into settings startup settings for the button I can add another condition I can say this button isn't clickable background color and I could go for like a really muted in fact needs to be darker muted green so that will mean that because of the hierarchy of my conditions here even when it's hovered it doesn't change color because the button is unclickable if I was to put content in each of these fields here then the button becomes clickable but to point out to be strictly from like a security point of view making sure that no one can work around the conditions you put in your app you'll want to also apply a condition to the workflow similar to this input email value is not empty and input password value is not empty and the reason for doing that is because although Bubble can supply the browser with the right details when it renders this HTML element that it is unclickable a user can work around that by using the browser inspect tool and kind of toggling that setting off so that would mean that someone could technically get the browser into a state where the button is clickable and they could run your workflow so to be really strict with it you'd want to put a condition on your workflow.

Creating Custom Buttons

Last thing I'm going to point out it in this video on buttons is custom buttons so how do how they'll get an icon into that button the quickest way to do that is to just use a group and basically create a group that looks like a button so in this instance I'm going to give it a background color and layouts just change my page layout to I'm using the old response engine on this page give me one sec okay this demo app was created before the change the new response engine so now I switched it I can go to rope and I can put in my text in fact I'm not going to do right no I will do right I will do right I can say sign up and place it in the middle also align everything in here to the middle get rid of my fixed width here and fit to content and now let's add in my icon and my icon I would vertically align and I could even go here and I put this spacing in here and then change my icon to something a bit more appropriate okay and then like I've demonstrated earlier in the video you can apply all the same conditional statements when it's hovers make it unclickable just like he would a button so there you have it that is a quick overview of working with buttons and creating custom buttons in Bubble.