ESP32 C3 Super Mini - Button Module

Want a real "click" input for your ESP32 C3 Super Mini without hunting for resistors? A button module packs the push button and its pull-down resistor onto one tiny board, so three wires are all it takes. This page walks you from the first raw reading to clean, bounce-free press events that never pause your sketch.

In this tutorial, you'll learn:

ESP32 C3 Super Mini - Button Module

Hardware Preparation

1×ESP32 C3 Super Mini
1×USB Cable Type-A to Type-C (for USB-A PC)
1×USB Cable Type-C to Type-C (for USB-C PC)
1×Button Module
1×Breadboard
1×Jumper Wires
1×Optionally, DC Power Jack

Or you can buy the following kits:

1×DIYables Sensor Kit (18 sensors/displays)
Disclosure: Some of the links provided in this section are Amazon affiliate links. We may receive a commission for any purchases made through these links at no additional cost to you.
Additionally, some of these links are for products from our own brand, DIYables .

Overview of Button Module

In short, the button module is a push button that already has its resistor on board. A momentary tactile switch with a colored cap is soldered on a small PCB, next to a pull-down resistor. While nobody touches the cap, the resistor keeps the OUT pin at LOW. Push the cap and the switch links OUT to VCC, so the pin goes HIGH. Let go and it falls back to LOW. Like every mechanical switch, the metal contacts bounce for a few milliseconds when they meet or part, so one press can look like several quick presses to a fast chip. The second and third code examples below deal with that.

Key Features:

  • Momentary tactile push button - it is only "ON" while you hold it down
  • Sold as a 5-pack with red, yellow, green, blue and white caps, handy for color-coded controls
  • Runs from 3.3V to 5V DC - use 3.3V with the ESP32 C3 Super Mini
  • Pull-down resistor already on the PCB - no external resistor, no INPUT_PULLUP
  • Active HIGH output: pressed = HIGH, released = LOW
  • 3-pin 2.54mm header, labeled VCC, OUT, GND

Why the Button Module is Great for Beginners:

  • The input never "floats", so you do not get random readings when the button is idle
  • The logic is not upside down: HIGH really means "pressed"
  • Three printed labels instead of four look-alike legs, so it is hard to wire wrong
  • It plugs straight into a breadboard and works with the same code as any digital input

Button Module Pinout

Read the labels from one end of the header to the other: VCC, OUT, GND.

  • VCC pin: power for the module. Connect it to the 3.3V pin of the ESP32 C3 Super Mini
  • OUT pin: the signal. Connect it to a GPIO pin. It reads LOW at rest and HIGH while the button is held
  • GND pin: ground. Connect it to a GND pin of the ESP32 C3 Super Mini (0V)
Button Module Pinout
image source: diyables.io

※ NOTE THAT:

Button module vs. bare push button: a bare 4-leg tactile button has two pairs of legs that are joined inside, and it is easy to pick two legs from the same pair. It also needs a pull-up or pull-down resistor (or INPUT_PULLUP in code), and with INPUT_PULLUP the logic is inverted: pressed reads LOW. The module fixes all three: clear labels, its own pull-down, and pressed reads HIGH. The ESP32 C3 Super Mini - Button tutorial covers the bare button if you want to compare.

Wiring Diagram between Button Module and ESP32 C3 Super Mini

Feed the module from the 3.3V pin, take the signal from OUT into GPIO7 (written as pin 7 in the code), and share ground. GPIO7 is a safe pick: it is not a strapping pin, so holding the button while you plug in the USB cable will not change how the board starts.

The wiring diagram between ESP32 C3 Super Mini Button Module

This image is created using Fritzing. Click to enlarge image

Button Module Pin ESP32 C3 Super Mini Pin
VCC 3.3V
OUT D7 (GPIO7)
GND GND

※ NOTE THAT:

Never connect VCC to the 5V pin. When the button is pressed, the OUT pin carries the same voltage as VCC. With 5V on VCC, a full 5V would reach GPIO7, but the ESP32-C3 pins are made for 3.3V only and can be damaged. Keep VCC on 3.3V.

ESP32 C3 Super Mini Code - Read the Raw Button Module State

Start simple: read the OUT pin five times per second and show what it says. This is the quickest way to check the wiring before you add any logic.

What the code does:

  • Sets GPIO7 as a plain INPUT - the pull-down on the module is enough
  • Reads the pin with digitalRead(), giving 1 (HIGH) or 0 (LOW)
  • Prints the number with a "PRESSED" or "RELEASED" label
  • Waits 200 milliseconds before the next reading
/* * This ESP32 C3 Super Mini code was developed by newbiely.com * * This ESP32 C3 Super Mini code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/esp32-c3/esp32-c3-super-mini-button-module */ // ESP32 C3 Super Mini - Button Module: read the raw OUT level and print it // No library is needed. The button module has its own pull-down resistor, // so OUT reads LOW (0) while the button is up and HIGH (1) while it is held down. // Power the module from 3.3V, NOT 5V: when pressed, OUT gives out the VCC voltage. #define BUTTON_MODULE_PIN 7 // The ESP32 C3 SuperMini pin GPIO7 (D7) connected to the OUT pin of the button module #define READ_INTERVAL 200 // time between two readings, in milliseconds (slows down the printing) // The setup function runs once on reset or power-up void setup() { Serial.begin(115200); // start the Serial Monitor at 115200 baud (enable "USB CDC On Boot" in Arduino IDE) // Plain INPUT: the pull-down resistor on the module already holds OUT at LOW. // Do NOT use INPUT_PULLUP here - it would fight the module's pull-down resistor. pinMode(BUTTON_MODULE_PIN, INPUT); Serial.println("ESP32 C3 Super Mini - Button Module: raw reading"); } // The loop function repeats indefinitely void loop() { int level = digitalRead(BUTTON_MODULE_PIN); // read GPIO7: 1 (HIGH) = pressed, 0 (LOW) = released Serial.print("OUT pin level: "); // print a label first Serial.print(level); // then the raw value, 0 or 1 if (level == HIGH) // the module is active HIGH, so HIGH means the cap is pushed down Serial.println(" -> PRESSED"); else // LOW means nobody is touching the button Serial.println(" -> RELEASED"); delay(READ_INTERVAL); // wait a little, so the Serial Monitor is not flooded with lines }

Detailed Instructions

  • New to ESP32 C3 Mini? Complete our Getting Started with ESP32 C3 Mini tutorial first to set up your development environment.
  • Build the circuit: Place the button module on the breadboard and run three jumper wires: VCC to 3.3V, OUT to GPIO7, GND to GND.
  • Plug in the board: Join the ESP32 C3 Super Mini to your computer with a USB Type-C cable.
  • Start Arduino IDE: Open the Arduino IDE.
  • Pick board and port: Select the ESP32 C3 Super Mini board and the COM port it uses.
  • Paste the sketch: Copy the raw-state code above into a new sketch. No library is required.
  • Upload: Press the Upload button and wait for "Done uploading".
How to upload ESP32 C3 Super Mini code on Arduino IDE
  • Open Serial Monitor: Choose 115200 baud.
  • Try it: Leave the button alone for a moment, hold it down for about a second, then let go. The value jumps from 0 to 1 and back:
∞
Newbiely | Arduino IDE 2.3.8
──
☐
✕
File
Edit
Sketch
Tools
Help
ESP32C3 Dev Module
Newbiely.ino
···
8 Serial.println("Hello World!");
Output
Serial Monitor
Message (Enter to send message to 'ESP32C3 Dev Module' on 'COM15')
New Line
9600 baud
ESP32 C3 Super Mini - Button Module: raw reading OUT pin level: 0 -> RELEASED OUT pin level: 0 -> RELEASED OUT pin level: 0 -> RELEASED OUT pin level: 1 -> PRESSED OUT pin level: 1 -> PRESSED OUT pin level: 1 -> PRESSED OUT pin level: 1 -> PRESSED OUT pin level: 1 -> PRESSED OUT pin level: 0 -> RELEASED OUT pin level: 0 -> RELEASED
Ln 11, Col 1
ESP32C3 Dev Module on COM15
2
  • Pro Tip: If the value stays at 1 all the time, OUT is probably on the VCC row of the breadboard. If it never leaves 0, check that the module's VCC wire really goes to 3.3V. A blank Serial Monitor usually means USB CDC On Boot is set to Disabled in the Tools menu - enable it and upload again.

Line-by-line Code Explanation

The above ESP32 C3 Super Mini code contains line-by-line explanation. Please read the comments in the code!

ESP32 C3 Super Mini Code - Detect Press and Release with a Delay Debounce

Most projects do not care about the level itself - they want to know the moment the button goes down or comes back up. This sketch watches for a change, then waits 50 milliseconds and reads again. If the new level is still there, the change is real and an event is printed; if not, it was only contact bounce. Keep in mind that delay() freezes the whole loop during those 50 milliseconds, so nothing else can run while it waits.

What the code does:

  • Stores the last confirmed state of the button (it starts as released)
  • Reads GPIO7 on every pass of loop()
  • When the reading differs from the stored state, pauses for 50ms and reads once more
  • Prints "The button is pressed" for a confirmed LOW to HIGH change
  • Prints "The button is released" for a confirmed HIGH to LOW change
  • Ignores any short glitch that disappears during the wait
/* * This ESP32 C3 Super Mini code was developed by newbiely.com * * This ESP32 C3 Super Mini code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/esp32-c3/esp32-c3-super-mini-button-module */ // ESP32 C3 Super Mini - Button Module: detect press and release events with a delay() debounce // No library is needed. The module has a built-in pull-down resistor, // so the OUT pin is LOW when released and HIGH when pressed (active HIGH). // Power the module from 3.3V, NOT 5V: when pressed, OUT gives out the VCC voltage. #define BUTTON_MODULE_PIN 7 // The ESP32 C3 SuperMini pin GPIO7 (D7) connected to the OUT pin of the button module #define DEBOUNCE_DELAY 50 // how long to wait for the contacts to settle, in milliseconds int last_state = LOW; // the last CONFIRMED state of the button (LOW = released at start-up) // The setup function runs once on reset or power-up void setup() { Serial.begin(115200); // start the Serial Monitor at 115200 baud (enable "USB CDC On Boot" in Arduino IDE) pinMode(BUTTON_MODULE_PIN, INPUT); // plain INPUT: the module's own pull-down resistor does the job last_state = digitalRead(BUTTON_MODULE_PIN); // remember the starting state, so no fake event is printed at boot Serial.println("Waiting for the button module..."); } // The loop function repeats indefinitely void loop() { int reading = digitalRead(BUTTON_MODULE_PIN); // first quick look at the OUT pin if (reading != last_state) { // the pin looks different from the last confirmed state delay(DEBOUNCE_DELAY); // wait 50ms for the bouncing to stop (the loop is BLOCKED during this time) reading = digitalRead(BUTTON_MODULE_PIN); // read again, now that the contacts are stable if (reading != last_state) { // the change is still there after the wait, so it is real last_state = reading; // save the new confirmed state if (reading == HIGH) // LOW -> HIGH: the button went down Serial.println("The button is pressed"); else // HIGH -> LOW: the button came back up Serial.println("The button is released"); } // if the second reading equals last_state, the first one was only a bounce: ignore it } }

Detailed Instructions

  • Same circuit: This sketch still uses GPIO7, so leave the wires where they are.
  • Paste the sketch: Copy the delay-debounce code above into a new Arduino IDE sketch.
  • Upload: Press the Upload button.
  • Open Serial Monitor: Stay at 115200 baud.
  • Try it: Give the button three separate clicks. Each click prints exactly one pair of lines:
∞
Newbiely | Arduino IDE 2.3.8
──
☐
✕
File
Edit
Sketch
Tools
Help
ESP32C3 Dev Module
Newbiely.ino
···
8 Serial.println("Hello World!");
Output
Serial Monitor
Message (Enter to send message to 'ESP32C3 Dev Module' on 'COM15')
New Line
9600 baud
Waiting for the button module... The button is pressed The button is released The button is pressed The button is released The button is pressed The button is released
Ln 11, Col 1
ESP32C3 Dev Module on COM15
2
  • Pro Tip: If a single click still shows two "pressed" lines, your module bounces longer than usual. Raise DEBOUNCE_DELAY to 80 or 100. For the millis() way of doing the same thing, read the ESP32 C3 Super Mini - Button - Debounce tutorial.

Line-by-line Code Explanation

The above ESP32 C3 Super Mini code contains line-by-line explanation. Please read the comments in the code!

ESP32 C3 Super Mini Code - Non-Blocking Debounce with the ezButton Library

The ezButton library does the debounce with a timer instead of delay(). Its loop() function only takes a quick look at the pin and returns at once, so your sketch can keep WiFi alive, read sensors or blink LEDs while the button is checked all the time. The module has a pull-down, so the button object is created with EXTERNAL_PULLDOWN. This mode needs ezButton version 1.0.6 or newer, and it makes the library treat HIGH as "pressed".

What the code does:

  • Creates an ezButton object on GPIO7 in EXTERNAL_PULLDOWN mode
  • Sets a 50ms debounce time with setDebounceTime()
  • Calls button.loop() at the top of every loop
  • Prints "Event: pressed" once when isPressed() is true and "Event: released" once when isReleased() is true
  • Prints the debounced level from getState() each time it changes
/* * This ESP32 C3 Super Mini code was developed by newbiely.com * * This ESP32 C3 Super Mini code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/esp32-c3/esp32-c3-super-mini-button-module */ // ESP32 C3 Super Mini - Button Module: non-blocking debounce with the ezButton library // Install "ezButton" (by ArduinoGetStarted.com, version 1.0.6 or newer) from the Library Manager. // The module has a built-in pull-down resistor: OUT = LOW when released, HIGH when pressed. // Power the module from 3.3V, NOT 5V: when pressed, OUT gives out the VCC voltage. #include <ezButton.h> #define BUTTON_MODULE_PIN 7 // The ESP32 C3 SuperMini pin GPIO7 (D7) connected to the OUT pin of the button module #define DEBOUNCE_TIME 50 // the debounce time in milliseconds; raise it if you still see double events // EXTERNAL_PULLDOWN tells ezButton that the pull-down resistor is outside the chip (on the module). // In this mode ezButton sets the pin as plain INPUT and treats HIGH as "pressed". ezButton button(BUTTON_MODULE_PIN, EXTERNAL_PULLDOWN); int last_steady_state = LOW; // used only to print the steady state when it changes // The setup function runs once on reset or power-up void setup() { Serial.begin(115200); // start the Serial Monitor at 115200 baud (enable "USB CDC On Boot" in Arduino IDE) button.setDebounceTime(DEBOUNCE_TIME); // ignore any change that does not stay for 50ms Serial.println("ezButton is watching GPIO7"); } // The loop function repeats indefinitely void loop() { button.loop(); // MUST be called first in every loop: it samples the pin and runs the debounce timer // It returns at once (no delay inside), so the rest of loop() keeps running freely if (button.isPressed()) // true only ONCE, at the moment the button goes down Serial.println("Event: pressed"); if (button.isReleased()) // true only ONCE, at the moment the button comes back up Serial.println("Event: released"); int steady_state = button.getState(); // the debounced (steady) state: 1 = pressed, 0 = released if (steady_state != last_steady_state) { // print the steady state only when it changes Serial.print("Steady state: "); Serial.println(steady_state == HIGH ? "HIGH (held down)" : "LOW (up)"); last_steady_state = steady_state; // remember it for the next comparison } // Other work can go here (blink an LED, read a sensor, keep WiFi alive...). // Because nothing above blocks, the button is still checked thousands of times per second. }

Detailed Instructions

  • Same circuit: No wiring change - the button module stays on GPIO7.
  • Install ezButton: In the Arduino IDE, open the Library Manager, type "ezButton" in the search box and install the library by ArduinoGetStarted.com (version 1.0.6 or newer)
  • Search for ezButton created by ArduinoGetStarted.com and click the Install button.
∞
Newbiely | Arduino IDE 2.3.8
──
☐
✕
File
Edit
Sketch
Tools
Help
ESP32C3 Dev Module
Library Manager
Type:
All
Topic:
All
ezButton by ArduinoGetStarted.com
Button library supports debounce, pressed/released events and the press counting. It is easy to use with multiple buttons. The library can be used for push-button, momentary switches, toggle switch, magnetic contact switch (door sensor)... It is designed for not only beginners but also experienced users. More info
1.0.6
INSTALL
Newbiely.ino
···
1 void setup() {
Output
Serial Monitor
Ln 1, Col 1
ESP32C3 Dev Module on COM15
1
  • Paste the sketch: Copy the ezButton code above into a new sketch.
  • Upload: Press the Upload button.
  • Open Serial Monitor: Keep 115200 baud.
  • Try it: Click the button twice, then press and hold it for a few seconds before letting go. Holding it does not repeat the event - you only get one "pressed" line and, later, one "released" line:
∞
Newbiely | Arduino IDE 2.3.8
──
☐
✕
File
Edit
Sketch
Tools
Help
ESP32C3 Dev Module
Newbiely.ino
···
8 Serial.println("Hello World!");
Output
Serial Monitor
Message (Enter to send message to 'ESP32C3 Dev Module' on 'COM15')
New Line
9600 baud
ezButton is watching GPIO7 Event: pressed Steady state: HIGH (held down) Event: released Steady state: LOW (up) Event: pressed Steady state: HIGH (held down) Event: released Steady state: LOW (up) Event: pressed Steady state: HIGH (held down) Event: released Steady state: LOW (up)
Ln 11, Col 1
ESP32C3 Dev Module on COM15
2
  • Pro Tip: Do not create the object as ezButton button(7); for this module. That default mode turns on the internal pull-up, which fights the module's pull-down, and it also flips the meaning of pressed and released.

Line-by-line Code Explanation

The above ESP32 C3 Super Mini code contains line-by-line explanation. Please read the comments in the code!

Applications and Project Ideas

A button module is the simplest way to give a WiFi or Bluetooth gadget a physical control. Some ideas for the ESP32 C3 Super Mini:

  • WiFi doorbell: send a phone notification over WiFi each time a visitor presses the button
  • Mode switch: step through display pages or sensor modes with each click
  • Bluetooth game pad: use the five colored modules as buttons for a small BLE controller
  • Start/stop timer: one press starts a stopwatch, the next press stops it
  • Smart lamp remote: toggle a relay or a smart bulb in another room through the network
  • Reset-to-setup button: hold the button at power-up to clear saved WiFi settings and open a setup page

Video Tutorial

Watch the video below for a visual walkthrough of this project.

Challenge Yourself

Practice what you learned with these tasks:

  • Easy: Count the presses and print "Press count: N" after each one
  • Easy: Light the onboard blue LED (GPIO8) only while the button is held down
  • Medium: Make each click toggle an LED between ON and OFF - see the ESP32 C3 Super Mini - Button LED tutorial for a hint
  • Medium: Add a second button module of another color and print which one was pressed
  • Advanced: Tell a short click from a 2-second hold using millis() - compare your result with the long press / short press tutorial
  • Advanced: Show a "Ring!" message on a web page hosted by the ESP32 C3 Super Mini whenever the button is pressed

※ OUR MESSAGES

  • As freelancers, We are AVAILABLE for HIRE. See how to outsource your project to us
  • Please feel free to share the link of this tutorial. However, Please do not use our content on any other websites. We invested a lot of effort and time to create the content, please respect our work!