<body class="body">
<div class="container">
<button class="btn">
<span class="icon icon-anim">
<svg version="1.1" id="fork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 465.5 465.5" style="enable-background:new 0 0 465.5 465.5;" xml:space="preserve"
width="48px" height="48px">
<g>
<g>
<path d="M311.6,21.7C311.2,9.6,301,0.1,288.9,0.5c-11.4,0.4-20.6,9.4-21.2,20.7L263.3,92h-4l-4.5-71c-0.7-11.7-10.2-20.8-21.9-21
h-0.3c-11.7,0.2-21.2,9.3-21.9,21l-4.5,71h-4l-4.4-70.8c-0.7-12.1-11.1-21.4-23.2-20.7c-11.3,0.7-20.3,9.8-20.7,21.1l-2.8,79.8
c0,0.1,0,0.2,0,0.3c0,44.5,21.8,86.5,52.7,103.2l-3.5,74.8l-6.7,144.6c0,0.2,0,0.2,0,0.4v0.2c0,0.4,0,0.8,0,1.3
c0.1,21.8,17.8,39.3,39.5,39.3c10.7,0,21-4.4,28.4-12.2c7.5-7.8,11.4-18.2,10.8-29l-6.7-144.6l-3.8-74.7
c30.8-16.8,52.6-58.8,52.6-103.2c0-0.1,0-0.2,0-0.4L311.6,21.7z M246.7,439.6c-7.4,7.8-19.7,8-27.4,0.6c-3.8-3.6-6-8.6-6-13.9
v-0.2c0-0.3,0-0.8,0-1.1l6.3-135h26.1l6.3,135.2C252.3,430.5,250.4,435.7,246.7,439.6z M220.6,270l2.8-58.4c6.2,1,12.5,1,18.7,0
l2.8,58.4H220.6z M247.7,189.5c-9.6,4-20.4,4-30,0C191.1,178.6,171,141,171,101.9l2.8-79.6c0-1.1,0.9-1.9,2-1.9c1,0,1.9,0.8,2,1.9
l5,80.2c0.3,5.3,4.7,9.4,10,9.5h22.8c5.3-0.1,9.7-4.2,10-9.5l5.1-80.4c0.1-1.1,0.9-2,2-2.1h0.3c1.1,0.1,1.9,1,2,2.1l5,80.3
c0.3,5.3,4.7,9.5,10,9.6h22.7c5.3-0.1,9.7-4.2,10-9.5l5-80.2c0.1-1,0.9-1.8,2-1.9c0.5,0,1,0.2,1.4,0.5c0,0,0.1,0,0.1,0.1
c0.3,0.4,0.5,0.8,0.5,1.3l2.8,79.6C294.4,141,274.3,178.7,247.7,189.5z" />
</g>
</g>
</svg>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
<svg id="tick" xmlns="http://www.w3.org/2000/svg" viewBox="10 0 120 120" width="60px" height="60px">
<g fill="none" stroke="#22AE73" stroke-width="2">
<polyline class="st0" stroke="#02B867" stroke-width="10" points="43.5,77.8 63.7,97.9 112.2,49.4 "
style="stroke-dasharray:100px, 100px; stroke-dashoffset: 200px;"></polyline>
</g>
</svg>
</div>
<svg id="knife" xmlns="http://www.w3.org/2000/svg" viewBox="-60 0 511 511.999" width="48px" height="48px">
<path
d="m242.042969 14.15625c0-4.171875-2.257813-8.03125-5.898438-10.070312-3.636719-2.042969-8.109375-1.960938-11.667969.214843-25.609374 15.636719-46.902343 37.730469-61.585937 63.898438-14.679687 26.167969-22.441406 55.855469-22.441406 85.863281v22.652344c0 4.140625 3.359375 7.5 7.5 7.5 4.144531 0 7.5-3.359375 7.5-7.5v-22.652344c0-53.457031 27.285156-104.082031 71.597656-133.613281v283.035156h-67.417969c-2.304687 0-4.175781-1.875-4.175781-4.175781v-94.59375c0-4.140625-3.359375-7.5-7.5-7.5-4.144531 0-7.5 3.359375-7.5 7.5v94.59375c0 10.574218 8.601563 19.175781 19.175781 19.175781h20.902344v162.757813c0 16.960937 13.796875 30.757812 30.757812 30.757812 16.957032 0 30.757813-13.796875 30.757813-30.757812v-467.085938zm-30.753907 482.84375c-8.691406 0-15.757812-7.066406-15.757812-15.757812v-162.757813h31.511719v162.757813c0 8.691406-7.066407 15.757812-15.753907 15.757812zm0 0" />
</svg>
</span>
<span class="text">Confirm Reservation</span>
</button>
</div>
</body>* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #FFE177;
font-family: 'Poppins', sans-serif;
transition: background 1.3s ease;
}
.body.active {
background: #628FD6;
transition: background 1.3s ease;
}
.body.green-bg {
transition: background 1.3s ease;
background: #62D47E;
}
.container {
max-width: 450px;
max-height: 130px;
overflow: hidden;
position: relative;
}
.btn {
width: 440px;
height: 130px;
border-radius: 10px;
background: #fff;
color: #000;
font-size: 20px;
outline: none;
border: 0;
font-weight: 600;
position: relative;
overflow: hidden;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s ease;
}
.btn .text {
font-size: 26px;
padding-left: 125px;
}
.btn:active {
animation: scale .6s ease-in-out;
}
@keyframes scale {
50% {
transform: scale(0.95);
}
100% {
transform: scale(1);
}
}
.icon {
width: 130px;
height: inherit;
position: absolute;
top: 0;
left: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
background: #FFB44C;
}
.icon svg {
fill: #fff;
z-index: 100;
}
.icon svg:first-child {
margin-right: 16px;
}
.icon svg:last-child {
margin-left: 16px;
}
.btn.active .icon.active {
width: 440px;
transition: all 1s ease;
transition-delay: .4s;
background: transparent;
}
.btn.active .icon.active::before {
content: '';
position: absolute;
top: 0;
left: 0;
background: #A8C7F7;
border-radius: 50%;
transform-origin: 50% 100%;
animation: bg-icon 6s ease forwards;
}
@keyframes bg-icon {
0% {
background: #A8C7F7;
border-radius: 50%;
transform-origin: 80px 80px;
transform: scale(0);
width: 40px;
height: 40px;
}
5% {
width: 60px;
height: 60px;
}
30%,
60%,
90% {
background: #A8C7F7;
border-radius: 8px;
width: 440px;
height: 130px;
transform: scale(1);
}
100% {
transition: background .5s ease;
background: #01B766;
border-radius: 8px;
width: 440px;
height: 130px;
transform: scale(1);
}
}
.clock {
position: relative;
height: 50px;
width: 50px;
background: #F7F5F7;
box-sizing: border-box;
border-radius: 100%;
border: 5px solid #fff;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
--opacity: 0;
--tick-opacity: 0;
}
.clock.active {
animation: clock-anim 8s ease 1s forwards;
}
@keyframes clock-anim {
0%,
39% {
--opacity: 1
}
/* 40%,60%,80%, */
100% {
--opacity: 0;
--tick-opacity: 1
}
}
.clock.active .hour {
width: 2px;
height: 40px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
opacity: var(--opacity);
animation: time 2.5s infinite linear;
}
.clock.active .hour:before {
position: absolute;
content: "";
background: #262626;
height: 20px;
width: 2px;
top: 20px;
left: 0;
opacity: var(--opacity);
border-radius: 8px;
}
.clock.active .minute {
width: 2px;
height: 40px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
opacity: var(--opacity);
animation: time 1.5s infinite linear;
}
.clock.active .minute:before {
position: absolute;
content: "";
background: #262626;
height: 18px;
width: 2px;
top: 18px;
left: 0;
border-radius: 8px;
opacity: var(--opacity);
}
@keyframes time {
to {
transform: rotate(360deg);
}
}
#tick {
position: absolute;
top: -9px;
left: -2px;
width: 40px;
height: 50px;
margin-left: 0;
}
#tick polyline {
opacity: 0;
}
#tick polyline.active {
-webkit-animation: checkmark 0.35s ease-in-out forwards;
animation: checkmark 0.35s ease-in-out forwards;
}
@keyframes checkmark {
0% {
stroke-dashoffset: 100px;
opacity: 1;
}
100% {
stroke-dashoffset: 0px;
opacity: 1;
}
}
.text.active {
opacity: 0;
transition: all .5s ease;
}
.icon.fade-top {
transform: translateY(-140px);
}// Idea: Mauricio Bucardo(https://dribbble.com/shots/13990468-Table-Reservation)
$(function () {
$(".btn").click(function () {
$(".body").addClass("active");
$(".btn").addClass("active");
$('.icon').addClass("active");
$('.clock').addClass("active");
$('.text').addClass("active");
setTimeout(function () {
$('.text').removeClass('active').text('Reservation Confirmed').css('padding-left', '0');
}, 3000);
setTimeout(function () {
$('.icon').addClass('fade-top');
}, 7000);
setTimeout(function () {
$('#tick polyline').addClass('active');
}, 6000);
setTimeout(function () {
$('body').removeClass('active').addClass('green-bg');
}, 5000);
});
});
External CSS
This Pen doesn't use any external CSS resources.