CSS Buttons
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css Buttons</title>
<style>
.button {
font-size: 16px;
padding: 12px 32px;
display: block;
/* float: left; */
margin: 25px 10px;
border: none;
background-color: white;
transition-duration: 1.5s;
}
.button:hover {
box-shadow: 0 8px 8px rgb(128, 128, 128,0.5);
}
.btn1 {
border: 2px solid skyblue;
font-size: 10px;
padding: 10px 24px;
border-radius: 2px;
}
.btn1:hover {
background-color: skyblue;
}
.btn2 {
/* background-color: dodgerblue; */
border: 2px solid dodgerblue;
font-size: 15px;
padding: 12px 28px;
border-radius: 4px;
}
.btn2:hover {
background-color: dodgerblue;
}
.btn3 {
/* background-color: red; */
border: 2px solid red;
font-size: 20px;
padding: 14px 40px;
border-radius: 8px;
}
.btn3:hover {
background-color: red;
box-shadow: 0 9px #999;
}
.btn4 {
/* background-color: lightseagreen; */
border: 2px solid lightseagreen;
font-size: 25px;
padding: 32px 16px;
border-radius: 12px;
width: 20%;
transition: 2s;
}
.btn4:hover {
width: 75%;
background-color: lightseagreen;
}
.btn5 {
/* background-color: violet; */
display: inline-block;
border: 2px solid violet;
border-radius: 4px;
font-size: 30px;
padding: 20px;
display: inline-block;
/* border-radius: 4px; */
/* width: 75%; */
}
.btn5:hover {
background-color: violet;
}
.btn5 span {
/* display: inline-block; */
position: relative;
transition: .5s;
}
.btn5 span::after {
content: "\21C9";
position: absolute;
/* padding: 20px; */
/* margin; */
font-size: 25px;
top: 0px;
right: -25px;
transition: .5s;
opacity: 0;
}
.btn5:hover span {
padding-right: 25px;
}
.btn5:hover span::after {
opacity: 1;
right: 0;
}
/* .disabled {
opacity: 0.2;
cursor: not-allowed;
} */
.buttun {
border: none;
background-color:#4caf50 ;
box-shadow: 0px 8px #999,0px 8px #999 ;
border-radius: 14px;
font-size: 28px;
padding:20px;
width: 200px;
text-align: center;
/* transition-duration: 0.8s; */
text-decoration: none;
overflow: hidden;
cursor: pointer;
height: 80px;
color: #fff;
}
.buttun:active {
box-shadow: 0px 6px grey,0px 6px grey;
}
/* .buttun::after {
content: "";
display: block;
background-color: whitesmoke;
padding-top: 300%;
padding-right: 350%;
margin-left:-350px ;
margin-right: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s;
}
.buttun:active:after{
padding: 0;
margin: 0;
opacity: 1;
transition: 0s ;
} */
</style>
</head>
<body>
<h1>CSS ADvance Buttons</h1>
<button class="btn1 button disabled">Click Me</button>
<button class="btn2 button disabled">Click Me</button>
<button class="btn3 button disabled">Click Me</button>
<button class="btn4 button disabled">Click Me ❤😒</button>
<button class="btn5 button disabled">Click Me<span></span></button>
<button class="btn6 buttun ">Click Me</button>
</body>
</html>
No comments:
Post a Comment