To create a button click effect using HTML and CSS, you can use CSS pseudo-classes like :active to apply styles when the button is clicked.
Copy the below HTML code
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<button>Click Me</button>
</div>
</body>
</html>
Copy the below CSS code
CSS
body {
margin: 0;
padding: 0;
display: grid;
height: 100vh;
place-items: center;
}
button {
padding: 15px 25px;
border: 1px solid black;
background-color: #ee82ee;
border-radius: 4px;
cursor: pointer;
position: relative;
transition: background-color linear .1s;
&:after {
content: "";
background-color: black;
left: 0;
top: 0;
transform: translate(2px, 2px);
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
border-radius: 4px;
border: 1px solid black;
}
&:hover {
background-color: #d675d6;
left: 1px;
top: 1px;
&:after {
transform: translate(1px, 1px);
}
}
&:active {
background-color: #be68be;
left: 2px;
top: 2px;
&:after {
transform: translate(0px, 0px);
}
}
}
