Learn Bubble with 500+ tutorials, courses & AI Assistant ✨

Limited time launch offer get $80 off today

0 days 0 hours 0 minutes 0 seconds
SAVE $80 NOW
Planet No Code logo
Bubble.io CoachingFounder MentoringSponsorships
LoginLearn Bubble.io

Bubble button element guide

In this Bubble.io tutorial we demonstrate the basics for working with buttons in Bubble. Including adding hover effects to buttons and building custom buttons with icons using groups.

Join now $19/monthLearn more
Get 500+ tutorials, a No-Code AI Assistant, 4 premium courses, and everything you need to build faster!
Bubble button element guide
Explore these topics...
Design
Buttons
Conditional statement
Styles

With just this tutorial learn...

Unlock the power of buttons: Learn to create custom CSS hover effects and dynamic user experiences!

Master Bubble's visual elements: Discover how to craft conditional statements for responsive, interactive buttons.

Create app-wide consistency: Harness the potential of Bubble's style editor to effortlessly manage button designs across your entire application.

With membership you'll...

Learn how to build a ChatGPT Clone, Custom CRM for your business & SaaS Marketing website with Webflow & AI.

Unlock 500+ Bubble tutorial videos with AI powered Q&A.

Debug your Bubble app instantly with our custom trained No Code AI Assistant.

Join now $19/month
Risk-free! 14-day money-back guarantee. Cancel anytime.

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.

Table of contents

Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Your No-Code Journey Starts Here

The best way to learn Bubble.io?

Build No Code Confidently

No more delays. With 30+ hours of expert content, you’ll have the insights needed to build effectively.

Find every solution in one place

No more searching across platforms for tutorials. Our bundle has everything you need, with 500+ videos covering every feature and technique.

Dive deep into every detail

Get beyond the basics with comprehensive, in-depth courses & no code tutorials that empower you to create a feature-rich, professional app.

Monthly
Yearly
Member
Accelerate your Bubble app to launch
$99 / month
$19/month/mo
Includes:
500+ tutorials
4 premium courses
Find the right tutorial with our custom trained AI
New tutorials added each week
Cancel anytime
14 day money back
Join now
Member
Accelerate your Bubble app to launch
$990 / year
$149/year/mo
Includes:
500+ tutorials
4 premium courses
Find the right tutorial with our custom trained AI
New tutorials added each week
Cancel anytime
14 day money back
Join now

Frequently Asked Questions

Find answers to common questions about our courses, tutorials & content.

Do I need any coding experience?

No. Our Beginner Essentials course and AI No-Code Coach are designed for total newcomers. You’ll learn Bubble.io step by step - no coding required.

How does the AI No-Code Coach work?

Simply type your question in plain English, and our AI taps into the entire video library to recommend the exact lessons you need. It’s like having a personal instructor on demand.

How long can I access the content?

As long as you’re subscribed! With our monthly subscription, you get unlimited access to all 500+ videos, our growing course library, and the AI No-Code Coach.

What courses are included

Your subscription includes:

  • Bubble Beginner Essentials – Get up and running fast.
  • Build a ChatGPT Clone – Integrate AI into your no-code apps.
  • Build Your SaaS Website with AI – Learn to create a scalable startup site.
  • Develop a Custom CRM App in Bubble - Learn database relationships with a CRM.

Plus, new tutorials every week!

What if I get stuck on a lesson?

The AI No-Code Coach is your first stop for instant answers. If you need deeper help, you can book 1:1 Bubble coaching for expert guidance.

Do you offer a money-back guarantee?

Yes! If you don’t see real progress within 14 days, let us know, and we’ll issue a full refund—no questions asked.

Can I cancel anytime?

Absolutely. Your subscription is month-to-month, and you can cancel anytime—no lock-ins, no hidden fees.

What if I want more than just tutorials & courses?

Absolutely. Your subscription is month-to-month, and you can cancel anytime—no lock-ins, no hidden fees.

If you’re serious about building a successful SaaS startup, check out Mastery—our intensive mentorship program. Mastery goes beyond Bubble.io development and includes:

  1. 1:1 mentorship to fast-track your progress
  2. Marketing strategies tailored for no-code founders‍
  3. Product management insights to scale your startup‍
  4. Personalized support from experienced founders

‍

Still have questions?

Reach out to our dedicated team.

Contact
Services
Search Bubble TutorialsBubble.io CoursesBook Bubble.io CoachingApply for Mastery
Latest Bubble tutorials
How to Build Your Own SEO Tool Without Coding!
Stream AI Generated Text into Bubble Repeating Group & Save to Database
Rerank Text By MEANING With Cohere In Bubble.io Step by Step!
Partnerships
Flusk.eu
VectorShift
Comnoco
Plumb
Toddle
Whereby
Get started with no code
AI Powered No Code AppsNo Code Web ScrapingBubble.io Plugin tutorialsBubble API Connector tutorialsStudent & Teacher DiscountBest tools for no coders
Follow us
Youtube
X
LinkedIn
Planet No Code logo
In partnership with
Queen Mary University of London Logo
© 2024 Planet No Code. All rights reserved.
Privacy PolicyTerms of ServiceCookies SettingsContact Us