Hey, friends Here is the tutorial of how can you create buttons in Html with CSS and run it.
Step-1:- Make the bioler plate of HTML.
Like this-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Step-2:- Then, under the body tag make the 'div' tag with any 'class'(you can also make the heading).
Like this-
<h class="heading">Buttons tutorial</h>
<div class="buttons">
Step-3:- Under the div tag add paragraph tag and write a paragraph.
Like this:-
<div class="buttons">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Tempora repellat aliquam sit ex esse rem ipsam enim iusto fugiat.
Cum aliquam temporibus alias soluta.</p>
Step-4:- Under the div tag add 'input' with value="Submit" and any class.
Like this-
<input type="button" value="Sumbit" class="big">
Step-5:- You can also add the links in buttons by adding 'anchor' tag under the div tag.
Like this -
<a href="https://www.blogger.com/blogger.g?blogID=6409105639535580839#allposts">
<input type="button" value="Sumbit" class="big"></a>
Step-6:- You can style the paragraph and buttons by adding inline, internal, external css of 'style' tag under the head tag.
Like this-
.heading{
background-color: blue;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.buttons{
border: 2px solid black;
background-color: blueviolet;
width: 666px;
height: 5rem;
padding: 34px;
}
a{
text-decoration: none;
}
a:hover{
background-color: chartreuse;
}
a:visited{
background: chocolate;
}
a:active{
background-color: red;
}
.big{
border-radius: 10px;
}
p{
background-color: cadetblue;
Step-5:- Your Html page of buttons is ready.
Here is the full coding of how to use buttons in Html with CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>buttons</title>
</head>
<body>
<style>
.heading{
background-color: blue;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.buttons{
border: 2px solid black;
background-color: blueviolet;
width: 666px;
height: 5rem;
padding: 34px;
}
a{
text-decoration: none;
}
a:hover{
background-color: chartreuse;
}
a:visited{
background: chocolate;
}
a:active{
background-color: red;
}
.big{
border-radius: 10px;
}
p{
background-color: cadetblue;
}
</style>
<h class="heading">Buttons tutorial</h>
<div class="buttons">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Tempora repellat aliquam sit ex esse rem ipsam enim iusto fugiat.
Cum aliquam temporibus alias soluta.</p>
<a href="https://www.instagram.com/knight_rider57/">Read more...</a>
<a href="https://www.blogger.com/blogger.g?blogID=6409105639535580839#allposts"><input type="button" value="Sumbit" class="big"></a>
</div>
</body>
</html>
I make it in Visual Studio. You can make it in any software. But, Visual Studio is very much better and it's size is very low of something 52 Mb. So you can download it and program like a proffesional coder.
Here is the link of Visual Studio
Thank You
0 Comments