How To Set the Style of a Button in html.

joemama123

Your Average Roblox Game Dev

Posted on February 3, 2024

How To Set the Style of a Button in html.

This tutorial was suggested by @veshremyfan in my last tutorial, So shout out to him/her. Anyways, here's the tutorial.

Have you ever wondered why your HTML button looks so ugly? Do you ever wonder how to change how it looks? Well the answer to that question is probably yes. If no, I suggest you get off of this tutorial.
Anyways, and this tutorial I will teach you how to set the style of your button in HTML. You will learn what to do and what not to do when setting the style for your button in HTML.

  1. What not to do:
<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <style>
      <button>your text here</button> <!-- NEVER put a button inside of a style! -->
    </style>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode
  1. Solution:
<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <style>
      btn { <!-- change btn to the nickname for your div class. -->
         Backround-color
        }
    </style>
    <div class="btn">
      <!-- "class" gives a nickname for it's only child. "btn" is the nickname I gave for the button. You can choose any nickname for your text. -->
      <button>your text here</button>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
joemama123
Your Average Roblox Game Dev

Posted on February 3, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related