button

break down of html

Let's break down the html

<body>
    <button type="button" class="button">Click me!</button>
</body>

You first add the button element, which consists of an opening and closing tag

 <button> and closing </button>

The type="button" attribute in the opening button tag explicitly creates a clickable button. Since this particular button is not used for submitting a form, it is useful for semantic reasons to add it in order to make the code clearer and not trigger any unwanted actions.
The class="button" attribute will be used to style the button in a separate CSS file. The value button could be any other name you choose. For example you could have used class="btn".
The text Click me! is the visible text inside the button.

styling button

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

The default styling of buttons will vary depending on the browser The code from above will result in the following: !button 1.png

How to Change the Default Styling of Buttons

for each option add to class or id

for background color

    background-color:#0a0a23;

for text color

    color: #fff;

Change the Border Style of Buttons

border color

    border-color: #fff;

having border or not

    border: none;

!button2.png

round-up the edges of the button

    border-radius:10px;

!button3.png

slight dark shadow effect around the button

    box-shadow: 0px 0px 2px 2px rgb(0,0,0);

!button4.png

1.7 KiB Raw Blame History