Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ISg.ttf) format('truetype');
}
:root,
button {
font-family: 'Raleway', serif;
}
* {
box-sizing: border-box;
}
.color {
background: linear-gradient(to right, #e1e0ff, #d7fadd);
}
body {
background: #191919;
background: white;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
letter-spacing: 3px;
color: #b9b9b9;
}
h1 {
padding-bottom: 40px;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 16px;
}
p {
padding-bottom: 15px;
}
p:last-of-type {
padding-bottom: 0;
}
.try-again {
cursor: pointer;
position: relative;
font-size: 16px;
}
.try-again:after {
content: '';
position: absolute;
left: 15px;
right: 15px;
height: 1px;
top: 100%;
background: #ebebeb;
margin-top: 8px;
transition: all 0.3s ease;
}
.try-again:hover:after {
left: 40%;
right: 40%;
}
.wrapper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.button {
cursor: pointer;
position: relative;
z-index: 2;
-webkit-appearance: none;
background: none;
outline: none;
border: none;
text-transform: uppercase;
letter-spacing: 3px;
border-radius: 2px;
transition: all 0.5s ease;
font-weight: 600;
font-size: 14px;
height: 60px;
width: 110px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 0px;
box-shadow: 0 0 0 white, 0 0 0 white;
}
.button-text {
display: inline-block;
position: relative;
z-index: 2;
background: linear-gradient(to right, #504bff, #4cfa63);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.button-circle {
position: absolute;
left: 0;
top: 0;
height: 6px;
width: 6px;
border-radius: 50%;
box-shadow: 0 0 10px #504bff, 0 0 20px #504bff, 0 0 30px #504bff;
transition: all 0.5s ease;
}
.button-circle2 {
top: auto;
bottom: 0;
}
.button-circle3 {
left: auto;
right: 0;
box-shadow: 0 0 10px #4cfa63, 0 0 20px #4cfa63, 0 0 30px #4cfa63;
}
.button-circle4 {
left: auto;
top: auto;
bottom: 0;
right: 0;
box-shadow: 0 0 10px #4cfa63, 0 0 20px #4cfa63, 0 0 30px #4cfa63;
}
.button:hover {
box-shadow: -15px 0 70px -15px #504bff, 15px 0 70px -15px #4cfa63;
}
.button:hover .button-circle1 {
-webkit-transform: translate(-15px, -15px) scale(0);
transform: translate(-15px, -15px) scale(0);
}
.button:hover .button-circle2 {
-webkit-transform: translate(-15px, 15px) scale(0);
transform: translate(-15px, 15px) scale(0);
}
.button:hover .button-circle3 {
-webkit-transform: translate(15px, -15px) scale(0);
transform: translate(15px, -15px) scale(0);
}
.button:hover .button-circle4 {
-webkit-transform: translate(15px, 15px) scale(0);
transform: translate(15px, 15px) scale(0);
}
.button:hover .button-circle {
box-shadow: none;
}
.popup {
opacity: 0;
visibility: hidden;
height: 400px;
width: 400px;
flex-shrink: 0;
border-radius: 3px;
position: relative;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.popup-inside {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: hidden;
border-radius: 50%;
box-shadow: 0 0 0 black;
transition: box-shadow 0.5s ease 0.7s, border-radius 0.35s ease 0.7s;
}
.backgrounds {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.background {
--offset: 0;
position: absolute;
left: var(--offset);
right: var(--offset);
bottom: var(--offset);
top: var(--offset);
background: linear-gradient(to right, #504bff, #4cfa63);
-webkit-transform: scale(0);
transform: scale(0);
transition: all 0.5s ease 0s;
border-radius: 50%;
}
.background2 {
--offset: 10%;
position: absolute;
left: var(--offset);
right: var(--offset);
bottom: var(--offset);
top: var(--offset);
background: linear-gradient(to right, #6665ff, #69fa7f);
-webkit-transform: scale(0);
transform: scale(0);
transition: all 0.5s ease 0.1s;
}
.background3 {
--offset: 20%;
position: absolute;
left: var(--offset);
right: var(--offset);
bottom: var(--offset);
top: var(--offset);
background: linear-gradient(to right, #8583ff, #85fa99);
z-index: 2;
transition: all 0.5s ease 0.2s;
}
.background4 {
--offset: 30%;
position: absolute;
left: var(--offset);
right: var(--offset);
bottom: var(--offset);
top: var(--offset);
background: linear-gradient(to right, #aaaaff, #a7fab7);
z-index: 3;
transition: all 0.5s ease 0.3s;
}
.background5 {
--offset: 40%;
position: absolute;
left: var(--offset);
right: var(--offset);
bottom: var(--offset);
top: var(--offset);
background: linear-gradient(to right, #c9c8ff, #c3fad1);
z-index: 4;
transition: all 0.5s ease 0.4s;
}
.background6 {
--offset: 40%;
position: absolute;
left: var(--offset);
right: var(--offset);
bottom: var(--offset);
top: var(--offset);
background: white;
z-index: 5;
transition: all 0.8s ease 0.4s;
}
.content {
--offset: 0;
position: absolute;
left: var(--offset);
right: var(--offset);
bottom: var(--offset);
top: var(--offset);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.35s ease 0.75s;
z-index: 10;
}
.content-wrapper {
text-align: center;
}
body.active .content {
opacity: 1;
-webkit-transform: none;
transform: none;
}
body.active .popup {
opacity: 1;
visibility: visible;
}
body.active .popup-inside {
border-radius: 0;
box-shadow: -50px 0 200px -50px #504bff, 50px 0 200px -50px #4cfa63;
}
body.active .background {
-webkit-transform: scale(1);
transform: scale(1);
}
body.active .background6 {
-webkit-transform: scale(8);
transform: scale(8);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="button" onclick="document.body.classList.add('active')">
<span class="button-text">Press</span>
<div class="button-backgrounds">
<div class="button-circle button-circle1"></div>
<div class="button-circle button-circle2"></div>
<div class="button-circle button-circle3"></div>
<div class="button-circle button-circle4"></div>
</div>
</div>
</div>
<div class="wrapper">
<div class="popup">
<div class="popup-inside">
<div class="backgrounds">
<div class="background"></div>
<div class="background background2"></div>
<div class="background background3"></div>
<div class="background background4"></div>
<div class="background background5"></div>
<div class="background background6"></div>
</div>
</div>
<div class="content">
<div class="content-wrapper">
<h1>well done</h1>
<p>Do you like it?</p>
<p class="try-again" onclick="document.body.classList.remove('active')">Yes! I will try again</p>
</div>
</div>
</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
</body>
</html>
