<div class="section">
<button id="btn">
<p id="btnText">Submit</p>
<div class="checked">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<path fill="transparent" d="M14.1 27.2l7.1 7.2 16.7-16.8"></path>
</svg>
</div>
</button>
</div>
* {
margin: 0;
padding: 0;
}
.section {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background: #e3ebfe;
}
button {
position: relative;
width: 250px;
height: 75px;
border: 0;
outline: none;
background: #2b2d42;
color: #fff;
font-size: 22px;
border-radius: 40px;
text-align: center;
box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.4);
overflow: hidden;
cursor: pointer;
}
.checked {
width: 75px;
height: 75px;
border-radius: 40px;
box-shadow: 0 0 12px -2px rgba(0, 0, 0, 0.2);
position: absolute;
top:0;
right: -40px;
opacity: 0;
/background: #d90429;
}
.checked svg {
width: 40px;
margin: 20px;
}
.checked path {
stroke-width: 3;
stroke: #fff;
stroke-dasharray: 34;
stroke-dashoffset: 34;
stroke-linecap: round;
}
.active {
background: #d90429;
transition: 1s;
}
.active p {
transition: 1s;
margin-right: 100px;
}
.active .checked {
opacity: 1;
transition: 1s;
right: 0;
}
.active .checked path {
transition: 1s;
transition-delay: 1s;
stroke-dashoffset: 0;
}
var btn = document.getElementById("btn");
var btnText = document.getElementById("btnText");
btn.onclick = function() {
btnText.innerHTML = "Thanks";
btn.classList.add("active");
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.