4

How can i code a blue Button with the length of 50 and witdh of 50 in Html ?

I'm really new at it

i allready have a button but i dont know how to change the color and the size of it

<button type="button">Click Me!</button>

4 Answers4

4

There are several ways to style elements, and they all use CSS. The most common one is including a CSS file with all the desired styles, but for the sake of this example, you can include a style tag in your HTML.

<style>
  button {
    display: block;
    width: 50px;
    height: 50px;
    background-color: blue;
  }
</style>

Note, that I've also made the display type of the element block to give me the ability to manipulate it's width AND height.

GMchris
  • 5,439
  • 4
  • 22
  • 40
2
<input type="button" style="background-color:blue;width:1330px;" value="click Me">
Jason Long
  • 79
  • 1
  • 12
2

Well to summarize things for you, there are 3 possibilities that you can follow:

1. Use an inline style for your button:

<button type="button" style="display: block; width: 50px;height: 50px; background-color:blue;">Click Me!</button>

2. Use the <style> tag to style your button:

<style>
   button {
     display: block;
     width: 50px;
     height: 50px;
     background-color:blue;
   }
</style>

3. Put your style in an external CSS File and include it in the <head> of your HTML.

<link href="path/to/your/file.css" rel="stylesheet" type="text/css" />

Note:

The choice of which approach to use, depends on the situation, for your simple case you can go with the inline styling.

This is a simple snippet:

<button type="button" style="display: block; width: 50px;height: 50px; background-color:blue;">Click Me!</button>
cнŝdk
  • 31,391
  • 7
  • 56
  • 78
1

A very quick solution would be to add the styles inline like this:

<button type="button" style="display: block; width: 50px; height: 50px;">Click Me!</button>
Barry Michael Doyle
  • 9,333
  • 30
  • 83
  • 143