<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Buttons and link in css</title>
</head>
<style>
/* in this class we will learn about the button properties and some also link property to make it act as an button */
#prop {
color: black;
border: 3px solid plum;
width: 500px;
margin: auto;
background-color: rgb(245, 229, 245);
border-radius: 5px;
}
.head {
font-style: italic;
}
.button {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: normal;
color: rgb(188, 129, 248);
}
/* here click is used as the representation of the class and we will creaate a link and will give dfferent properies that make it mroe stlish and made it like a like for click able and presentable in this class we used different properies like a stle color etc and we can use many other properties */
.click {
color: red;
border: 1px solid black;
/* width: 100px; */
/* padding: 3px; */
padding-left: 3px;
padding-right: 3px;
margin: 5px;
background-color: blanchedalmond;
/* basicall a link ghave no border also have an extra undelined text so we used a property called text decoration whcih is basically used to give some decorations here we do not wnna apply any decoration so i will written it as none so underlined is canceled out */
text-decoration: none;
border-radius: 3px;
}
/* hover is used for the show of the active ness of the button means when we move the cursor ont he button then hover is propery whoch little bit chaneg up the styles according to our requirement then */
a:hover,
.get:hover {
background-color: rgb(179, 121, 235);
color: white;
}
/* active tag is used for the active ness of the button like whne we click on the button at that movement its control is managed by the active property and we will give it different properties at that movement also we take picture at that movement */
a:active {
background-color: rgb(104, 15, 104);
color: rgb(219, 108, 44);
}
/* here get is used as the representation of the class and we will creaate a button and will give dfferent properies that make it mroe stlish and made it like a button in this class we used different properies like a stle color etc and we can use many other properties */
.get {
color: red;
border: 1px solid black;
/* width: 100px; */
/* padding: 3px; */
padding-left: 3px;
padding-right: 3px;
margin: 5px;
background-color: blanchedalmond;
/* bassicaly a button do not sshow the property of the chaneg the corser into the poiter when we hover on it so we can additional apply on it an axtra property which is called cursor and it is used by writtten word pointer after the word cursor */
cursor: pointer;
border-radius: 2px;
}
.thank {
color: red;
border: 2px solid saddlebrown;
width: 100px;
float: centre;
margin: auto;
cursor: pointer;
}
</style>
<body>
<div id="prop">
<h3 class="head">First for click and next as button</h3>
<p class="button">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sapiente hic
pariatur, corrupti veniam natus quia. Consequuntur sapiente deleniti
omnis, autem optio tenetur eveniet dolor. Sit cum alias ipsa quisquam
tempora.
</p>
<a href="https//:www.google.com" class="click"> click it </a>
<button class="get">get more</button>
</div>
<!-- it may but sure be may more about things abiut the buttons but i would like to end with there next we will study about the something extra in cascading style sheet -->
<p class="thank"><strong>Thank You</strong></p>
</body>
</html>