DEV Community

Your Average Roblox Game Dev
Your Average Roblox Game Dev

Posted on • Edited on

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

Top comments (0)