AI Helps You Build Buttons for an App

End-of-lesson check

15 questions · take it digitally for instant feedback at tendril.neural-forge.io/learn/quiz/end-explorers-ai-coding-AI-and-buttons

1. What is a 'button' in web or app design?

   1. A physical key on a keyboard
   2. A clickable UI element that triggers an action when pressed
   3. An image that decorates a page
   4. A type of font

2. What is a 'hover state' for a button?

   1. When a button floats off the page
   2. A visual change that shows users the button is interactive when they move their mouse over it
   3. A button that disappears when clicked
   4. An animation that plays on page load

3. What is an 'active state' for a button?

   1. A button that is on a webpage
   2. A visual change that appears while the button is being pressed down — like it sinking inward
   3. A button that is turned on by default
   4. The normal appearance of a button

4. In CSS, how do you style a button's hover effect?

   1. button.hover { }
   2. button:hover { }
   3. button[hover] { }
   4. #hover-button { }

5. Why does a button's label (text) matter so much in UX design?

   1. Labels are decorative only
   2. A clear label tells users exactly what will happen when they click — reducing confusion and mistakes
   3. Buttons don't need labels if they have colors
   4. Labels only matter for accessibility tools

6. Which button label is BETTER from a UX perspective?

   1. 'Yes'
   2. 'Submit'
   3. 'Save Changes'
   4. 'OK'

7. What does AI help you with when designing buttons for an app?

   1. AI physically builds the buttons for you
   2. AI suggests CSS styles, color combinations, and UX best practices for making effective buttons
   3. AI only helps with the JavaScript part
   4. Buttons can't be designed with AI

8. What is 'color contrast' and why does it matter for buttons?

   1. The number of colors used on a page
   2. The difference in brightness between button text and background — high contrast makes buttons readable for everyone
   3. Only relevant for dark mode apps
   4. A type of button animation

9. A button says 'Click Here.' A UX designer says this is bad. Why?

   1. 'Click Here' is too long
   2. 'Click Here' tells users nothing about what will happen — it's a meaningless label
   3. Buttons shouldn't use verbs
   4. 'Click' is not an action word

10. What CSS property changes a button's background color on hover?

    1. hover-color
    2. background-color inside button:hover { }
    3. button-color
    4. bg-hover

11. What is a 'disabled' button state?

    1. A button that has been deleted
    2. A button that is visible but cannot be clicked — often grayed out when an action isn't available yet
    3. A button with no label
    4. A button on a broken website

12. Why do mobile apps use LARGER buttons than desktop websites?

    1. Mobile screens are smaller so buttons need to be proportionally bigger
    2. Fingers are less precise than mouse cursors — larger buttons reduce accidental taps
    3. Mobile users have worse eyesight
    4. All apps use the same button size

13. What happens when you add `cursor: pointer;` to a button in CSS?

    1. A cursor appears on screen
    2. The mouse cursor changes to a hand icon when hovering over the button, signaling it is clickable
    3. The button moves when hovered
    4. The button gets a border

14. What is `border-radius` used for on buttons?

    1. Making the button invisible
    2. Rounding the corners of the button — from sharp square corners to soft rounded or even pill-shaped buttons
    3. Adding a shadow to the button
    4. Setting the button's width

15. What should you do after AI generates button CSS for you?

    1. Use it without looking at it
    2. Read it to understand what each property does, then customize it to fit your app's style
    3. Only use AI-generated code that you can't modify
    4. Delete it and write your own from scratch