CSS Buttons project

nikhilajjarapu — Mon, 06 Nov 2023 12:13:20 +0000

Buttons

HTML
`<!DOCTYPE html>

Document click click click click click click click click click `
CSS
`{
padding: 0%;
margin: 0%;
font-family:"Bebas Neue";
font-size: large;
}
body{
/ background-color:rgba(0, 0, 0, 0.726); /
height: 100vh;
/ background-image: linear-gradient(to left ,rgba(255, 0, 0, 0.589),rgba(0, 0, 255, 0.74)); /
/ background-image: radial-gradient(circle at center, red 10%, green 40%, blue 80%); /
/ background-image: radial-gradient(ellipse, red 30%, blue 100%); */
background-image: linear-gradient(65deg,red,rgb(75, 145, 236) );

}

div1{

width: 600px;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%,-50%);
 display: flex;
 justify-content:space-between;
 align-items: center;

}

div1 button{

width: 170px;
height: 50px;

}

div2{

width: 600px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
 display: flex;
 justify-content:space-between;
 align-items: center;

}

div2 button{

width: 170px;
height: 50px;

}

div3{

width: 600px;
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%,-50%);
 display: flex;
 justify-content:space-between;
 align-items: center;

}

div3 button{

width: 170px;
height: 50px;

}
/* first button style */

button1{

position: relative;
background-color: blueviolet;
border: 0px;
color: aliceblue;
z-index: 1;

}

button1::after{

content: "";
background-color: rgb(98, 49, 145);
position: absolute;
bottom:0%;
left: 0%;
height: 5px;
width: 0%;
transition: 0.3s;
z-index: -1;

}

button1:hover::after{

width:100%;
/* transform:rotate(180deg); */
/* z-index: 1; */;

}

button1:hover{

color: orange;
transition: 0.3s;

}

/* //second button style */

button2{

position: relative;
z-index: 1;
border: 0px;

}

button2::after{

content: "";
background-color: orangered;
position: absolute;
bottom: 0px;
left: 0%;
width: 100%;   /*intially we need to set the width as 150px*/
height: 0px;    /*then we need to set value as 0 so antimation will start from the bottom to top from 0 px of height to 40 px of height */
transition:0.3s;
z-index: -1;

}

button2:hover::after{

/* width: 150px; /
height: 100%;

/ here we are increasing height from 0 to 40px /
}
/ third button */

button3{

background-color: rgb(255, 0, 0);
border: 0px;
position: relative;
z-index: 1;

}

button3::before{

content: "";
/* background-color: rgb(171, 231, 235); */
background-color:wheat;
position: absolute;
bottom: 0%;
left: 0%;
width: 100%;
height: 0%;
transition: 0.3s;
z-index: -1;

}

button3:hover::before{

height: 100%;

}

button2:hover{

color: rgb(206, 203, 203);

}

/* fourth button */

button4{

position: relative;
border: 0px;
background-color: hotpink;
z-index: 1;

}

button4::before{

content: "";
background-color: rgb(184, 4, 94);
position: absolute;
top: 0px;
right:0px ;
width: 0%;
height: 50px;
transition: 0.3s ease-out;
z-index: -1;

}

button4:hover::before{

width: 100%;

}

button4:hover{

color:whitesmoke ;

}

/* fifth buttuon */

button5{

background-color: rgb(16, 77, 190);
border: 0px;
position: relative;
z-index: 1;

}

button5::after{

content: "";
background-color: cornflowerblue ;
position: absolute;
top: 0%;
left: 0%;
width: 0%;
height: 50px;
transition: 0.3s;
z-index: -1;

}

button5:hover::after{

width: 100%;

}

button5:hover{

color: white;
transition: 0.4s;

}

/* sixth button */

button6{

position: relative;
z-index: 1;
border: 0px;

}

button6::after{

content: "";
background-color: orangered;
position: absolute;
bottom: 0px;
left: 0%;
width: 0%;   /*intially we need to set the width as 150px*/
height: 0px;    /*then we need to set value as 0 so antimation will start from the bottom to top from 0 px of height to 40 px of height */
transition:0.3s;
z-index: -1;

}

button6:hover::after{

height: 100%;  
width: 100%;
z-index: -1;
transition: 0.3s ease-in;

}

button7 {

background-color: #3498db; /* Use your preferred background color */
color: #ffffff; /* Text color */
border: 0px;
position: relative;
z-index: 1;

}

button7::before,

button7::after {

content: "";
position: absolute;
background-color: rgb(0, 121, 46); /* Use your preferred color */
width: 0%;
height: 100%;
transition: 0.3s ease-in-out;
z-index: -1;

}

button7::before {

left: 50%;
top: 0%;

}

button7::after {

right: 50%;
top: 0%;

}

button7:hover::before,

button7:hover::after {

width: 50%; /* Expand from the center to both sides */

}

/* #button8{
background-color:gold;
border: 0px;
position: relative;
z-index: 1;
color: antiquewhite;
}

button8::before,#button::after{

content: "";
background-color: black;
position: absolute;
width: 100%;
height: 0px;
transition: 0.3s ease-in-out;
z-index: -1;

}

button8::before{

top: 0%;
}

button8::after{

bottom: 0%;

}

button8:hover::before,

button8:hover::after{

height: 50%;

} */

button8 {

background-color: rgb(255, 194, 11); /* Use your preferred background color */
color: #ffffff; /* Text color */
border: 0;
z-index: 1;
position: relative;

}

button8::before,

button8::after {

content: "";
position: absolute;
background-color:black;
width: 100%;
height: 0%;
transition:  0.3s ease-in-out;
z-index: -1;

}

button8::before {

top: 0;
left: 0px;

}

button8::after {

bottom: 0;
right: 0;

}

button8:hover::before,

button8:hover::after {

height: 50%; /* Expand from the middle to top and bottom */

}

button9{

background-color:black;
position: relative;
border: 0px;
z-index: 1;
color: white;

}

button9::after,#button9::before{

content: "";
background-color: green;
position: absolute;
width: 100%;
height: 0px;
z-index: -1;
transition: 0.3s ease-in;

}

button9::before{

top:50%;
left: 0%;

}

button9::after{

bottom:50%;
left: 0%;

}

button9:hover::before,

button9:hover::after{

height: 50%;

}
`

DEV Community: nikhilajjarapu

CSS Buttons project

div1{

div1 button{

div2{

div2 button{

div3{

div3 button{

button1{

button1::after{

button1:hover::after{

button1:hover{

button2{

button2::after{

button2:hover::after{

button3{

button3::before{

button3:hover::before{

button2:hover{

button4{

button4::before{

button4:hover::before{

button4:hover{

button5{

button5::after{

button5:hover::after{

button5:hover{

button6{

button6::after{

button6:hover::after{

button7 {

button7::before,

button7::after {

button7::before {

button7::after {

button7:hover::before,

button7:hover::after {

button8::before,#button::after{

button8::before{

button8::after{

button8:hover::before,

button8:hover::after{

button8 {

button8::before,

button8::after {

button8::before {

button8::after {

button8:hover::before,

button8:hover::after {

button9{

button9::after,#button9::before{

button9::before{

button9::after{

button9:hover::before,

button9:hover::after{