If you are bored simple popups and look for a way to make your page more attractive, just use the following magical popup. Click on the button and you will see the popup loads in the page with a magic. If you want to see it again click on the “Try again” button and enjoy!

HTML
<!-- this script got from www.devanswer.com -->
<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><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.devanswer.com">Developer Code</a>
CSS
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);
}