Button Interaction Animation
<!DOCTYPE html>
<html lang="en">
<head>
<title>Button Interaction Animation</title>
<style>
/* CSS code */
.button{
position: relative;
width: 70px;
height: 30px;
font-size: 10px;
background-color: #202231;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: width .5s;
border-radius: .5s;
}
.button *{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: opacity .25s;
}
.icon{
opacity: 0;
}
.button:focus{
width: 30px;
background-color: #44c08a;
border-radius: 50%;
}
.button:focus .text{
opacity: 0;
}
.button:focus .icon{
opacity: 1;
transition-delay: .4s;
}
</style>
</head>
<body>
<!-- HTML code -->
<button class="button">
<span class="text">Submit</span>
<i class="ri-check-line icon"></i>
</button>
</body>
</html>