HTML CSS + SCSS ::hover ::active ::after ::before
:root
{
--primary:black;
--secondory:#ffff;
}
body
{
margin: 0;
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
background: rgb(109, 154, 178) ;
background-image: linear-gradient(22deg, #214dfe, #d721fe 100%);
}
.header
{
display: flex;
align-items: center;
justify-content: center;
color: #ffff;
font: 500 5vmin/6vmin arial;
position: relative;
height: 40vmin;
width: 40vmin;
padding: 8vmin;
box-sizing: border-box;
border-radius: 1em;
background: var(--primary);
cursor: pointer;
box-shadow: 0 2vmin 2.5vmin -2vmin rgb(0, 0, 0,0.5);
transition:background 0.25s ease-in color 0.25s ease-in, transform 0.25s ease-in, border-radius 0.25s ease-in 0.5%;
}