WEB BEKS | HTML & CSS & JS

CSS



body {

display: flex;

justify-content: center;

align-items: center;

background-color: #222;

height: 90vh;

font-family: 'Courier New', Courier, monospace;

}

.container{

margin: 10px;

}

.btn{

line-height: 50px;

height: 50px;

text-align: center;

width: 300px;

cursor: pointer;

}

.btn-two{

color: #fff;

transition: all 0.5s;

position: relative;

}

span{

display: block;

position: absolute;

width: 100%;

}

.btn-two::before{

content: '';

position: absolute;

left: 0;

width: 100%;

height: 100%;

transition: all 0.5s;

border: 1px solid rgba(255,255,255,0.2);

background-color: rgba(255,255,255,0.1);

}

.btn-two::after{

content: '';

position: absolute;

left: 0;

width: 100%;

height: 100%;

transition: all 0.5s;

border: 1px solid rgba(255,255,255,0.2);

background-color: rgba(255,255,255,0.1);

}

.btn-two:hover::before{

transform: rotate(-45deg);

background-color: rgba(255,255,255,0);

}

.btn-two:hover::after{

transform: rotate(45deg);

background-color: rgba(255,255,255,0);

}