• Skip to main content
  • Skip to primary sidebar

RNTLab.com

The Ultimate Shortcut to Learn Electronics and Programming with Open Source Hardware and Software

  • Courses
  • Forum
    • Forum
    • Ask Question
  • Shop
  • Account
  • Blog
  • Login

Web Server ESP32 Buttons

Q&A Forum › Category: ESP32 › Web Server ESP32 Buttons
0 Vote Up Vote Down
michaelbennett3443 asked 6 years ago

Hi I have built the ESP32 Server and its working excellent. I have been able to add more buttons to control the devices that is connected to the outputs, no problem there. I currently have 10 buttons displayed on the server all the buttons work properly. The problem is with the big amount of buttons, Im constantly scrolling either up or down to access the buttons after 1 is pressed. I have tried to add code unsuccessfully to display 2 buttons per row but  its not working. The button are stilled display 1 per line versus 2 per line. Any help will be appreciated.

1 Answers
0 Vote Up Vote Down
Sara Santos Staff answered 6 years ago

Hi Michael.

I’m not an expert in HTML or CSS, but I’ve tested this approach in our web server code and it worked well to display two buttons on the same row:

  • Simply include the two buttons on the same paragraph (highlighted in bold)
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Web Server</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<style>
html {
font-family: Helvetica;
display: inline-block;
margin: 0px auto;
text-align: center;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 40px;
text-decoration: none;
font-size: 30px;
margin: 2px;
cursor: pointer;
}
.button2 {
background-color: #555555;
}
</style>
</head>
<body>
<h1>ESP32 Web Server</h1>
<p>GPIO 26 - State</p>
<p><a href="/26/on"><button class="button">ON</button></a><a href="/26/off"><button class="button button2">OFF</button></a></p>
<p>GPIO 27 - State</p>
<p><a href="/27/on"><button class="button">ON</button></a><a href="/27/off"><button class="button button2">OFF</button></a></p>
</body>
</html>

You can do this for all your buttons.
This is the result:

Let me know if this is what you’ve expected and if it works for you.

Regards,

Sara

Primary Sidebar

Login to Ask or Answer Questions

This Forum is private and it’s only available for members enrolled in our Courses.

Login »

Latest Course Updates

  • [eBook Updated] Learn Raspberry Pi Pico/Pico W with MicroPython eBook – Version 1.2 May 26, 2025
  • [New Edition] Build ESP32-CAM Projects eBook – 2nd Edition April 16, 2025

You must be logged in to view this content.

Contact Support - Refunds - Privacy - Terms - MakerAdvisor.com - Member Login

Copyright © 2013-2025 · RandomNerdTutorials.com · All Rights Reserved

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.