Building Buttons in html

Building Buttons in html

button

Buttons in html are very useful, with buttons programmer change webpages based on users behaviour. For example , clicking next can run code that cycle through characters.

To create a button users can click on, we need the opening tag <button> and the closing </button>.

<!DOCTYPE html>
<html>
 <head>
       <title> My first webpage </title>
 </head>
 <body>
    <h1> My first heading </h1>
     <p> This is my first paragraph .... more is coming </p>
     <p> subscribe to our newsletter </p>
        <button> Subscribe </button>
 </body>
</html>

Using others elements like <strong> … </strong> inside the button tags can give a bit of style.


<button> <strong> Click here </strong> </button>

<!DOCTYPE html>
<html>
 <head>
       <title> My first webpage </title>
 </head>
 <body>
    <h1> My first heading </h1>
     <p> This is my first paragraph .... more is coming </p>
     <p> subscribe to our newsletter </p>
        <button> First </button>
        <button> Second </button>
        <button> Third  </button>
 </body>
</html>

Buttons display next to each other even if they are on separate line of code.

If we want buttons to stack on top of each other we can use the <br> tag to place each button on the new line.

<!DOCTYPE html>
<html>
<head>
<title> My first webpage </title>
</head>
<body>
<h1> My first heading </h1>
<p> This is my first paragraph .... more is coming </p>
<p> subscribe to our newsletter </p>
<button> First </button> <br>
<button> Second </button> <br>
<button> Third </button> <br>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow by Email
LinkedIn
LinkedIn
Share
Instagram
error: Content is protected !!