<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo selectors & more designing</title>
</head>
<style>
.container {
border: 3px solid seagreen;
background-color: skyblue;
width: 500px;
margin: 34px auto;
padding: 34px;
}
.btn {
border-radius: 15px;
background-color: rgb(66, 222, 233);
border: 2px solid darkorange;
padding: 5px;
color: rgb(150, 42, 22);
cursor: pointer;
font-weight: bold;
}
button{float: right;}
#hbtn{
text-decoration: none;
}
a:hover{
background-color: crimson;
color: white;
border: yellow 3px solid;
}
a:active{
background-color: fuchsia;
cursor: progress;
color: black;
text-transform: uppercase;
}
button:hover{
background-color: chartreuse;
color: red;
border: 4px solid darkorange;
text-transform: lowercase;
}
button:active{
background-color: rgb(2, 1, 12);
color: white;
border: 5px solid wheat;
text-transform: uppercase;
}
</style>
<body>
<div class="container" id="cont1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta quo error quibusdam accusamus assumenda at natus
vero nesciunt in tempora ullam ratione ducimus ut, tempore nisi eius distinctio suscipit maiores eligendi beatae
fuga mollitia explicabo? Iusto dignissimos obcaecati accusamus esse alias exercitationem, sed minus nam ipsam.
Nisi vero est quibusdam!
<div><hr>
<a href="https:/google.com" class="btn" id="hbtn">read more</a>
<button class="btn" id="bbtn">READ MORE</button>
</div>
</div>
</body>
</html>
Comments
Post a Comment