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'll drag 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. Okay.
Button hover effects
You can see that when my mouse goes over it, the button background colour 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 colour and to choose something that stands out. 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 colours, but you're likely to have at least the primary button and perhaps a secondary button.
Bubble Styles
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. 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 labeled, primary button. The change to the style has affected both buttons. 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?
Transitions (Animations)
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 colour to another when the button is hovered, whether that happens instantly, or whether there's not 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. What else can I do with buttons?
Unclickable buttons
Well, you can make a button not clickable. So in conditional statements, I can say when current user name is mapped.
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 up here. 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.
There is a bit, a 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 then 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 it 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 value is not empty, this button becomes unclickable. So let's try that.
So what have we got? We have got is not empty. Oh, I can't the wrong way around, I'm sorry. So is empty because I want it to become unclickable. 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 browser detects that it's clickable and the bubble provides the code to indicate that I get the hand icon instead of the arrow icon and 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 but then also that the button isn't clickable because what you can do there is if I go into settings, Style settings for the button, I can add another condition. I can say this button isn't clickable background colour and I could go for like a really muted in fact it 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 colour because the button is unclickable. If I was to put content in each of these fields here, then the button becomes clickable.
Truly protecting your workflows with unclickable buttons
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.
Buttons with icons
Last thing I'm going to point out in this video on buttons is custom buttons. How would I 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, colour and layout. Need to just change my page layout to I'm using the old responsive engine on this page. Give me 1 second. Again, this demo app was created before the change to the new response engine. So now I switched it.
I can go to row and I can put in my text. In fact, I'm not going to do row. No, I will do row. I will do row. 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 the spacing in here. And then change my icon to something a bit more appropriate. Just go with it. With you.
Okay. And then, like I've demonstrated earlier in the video, you can apply all the same conditional statements when it's hovered, make it unclickable, just like you would a button. So there you have it. That is a quick overview of working with buttons and creating custom buttons in Bubble.