CTA-CSS-POPUP

by Dhanck

HTML

<div class="parla-cta">
  <div class="box">
    <a class="button" href="#popup1">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="60px" viewBox="0 0 20 20" class="comm-btn">
        <g id="Free-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
          <g transform="translate(-1265.000000, -156.000000)" id="Group" stroke="#d31334" stroke-width="2">
            <g transform="translate(1263.000000, 154.000000)" id="Shape">
              <path d="M8.29997591,16.1586109 L4.71,18.3 L5.32628923,14.6238888 C3.83281239,13.3921212 3,11.6856969 3,9.8 C3,6.0444637 6.30329488,3 11.55,3 C16.7967051,3 20.1,6.0444637 20.1,9.8 C20.1,13.5555363 16.7967051,16.6 11.55,16.6 C10.3617053,16.6 9.27309774,16.4438342 8.29997591,16.1586109 Z">
              </path>
              <path d="M19.7000346,12 C20.5370398,12.8311353 21,13.932301 21,15.1401596 C21,16.4401458 20.4637233,17.6165428 19.5020218,18.4657147 L19.8988718,21 L17.587162,19.5237413 C16.9605351,19.7203723 16.259543,19.8280319 15.4943589,19.8280319 C12.7385072,19.8280319 10.8153028,18.4315592 10.2,16.5116586 L10.2,16.5116586">
              </path>
            </g>
          </g>
        </g>
      </svg>
    </a>
  </div>
  <div id="popup1" class="overlay">
    <div class="popup">
    <svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="34" height="34" class="logo"><path d="M13.499 0C20.956 0 27 6.045 27 13.5 27 20.957 20.956 27 13.499 27 6.044 27 0 20.958 0 13.5 0 6.044 6.044 0 13.499 0zm7.076 20.18c-.425 0-.825-.127-1.22-.391-2.184-1.454-1.438-3.198.053-5.897.63-1.145 1.282-2.324 1.572-3.542.311-1.31.594-3.22-.542-4.664-.534-.677-1.347-1.2-2.413-1.554-1.112-.367-2.54-.566-4.25-.589l-.118-.003-.434.003c-1.709.023-3.139.222-4.248.589-1.068.354-1.88.876-2.415 1.554-1.136 1.445-.853 3.354-.54 4.664.288 1.218.941 2.4 1.57 3.541 1.491 2.7 2.238 4.444.052...

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
.parla-cta {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-family: 'Montserrat', sans-serif;
}
.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
    font-size: 1em;
    color: #c1c3fb;
    height: 100px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease-out;
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 17px 1px rgba(0,0,0,0.26);
    box-shadow: 0px 0px 17px 1px rgba(0,0,0,0.26);
}
.button:hover {
  background: #c1c3fb;
  color: #fff;
  stroke:#fff;
}
.button:hover .comm-btn #Group {
    stroke: #fff!important;
}
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* background: rgba(0, 0, 0, 0.7); */
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  padding: 20px;
    background: #fff;
    border-radius: 5px;
    width: 300px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    transition: all 5s ease-in-out;
     -webkit-box-shadow: 0px 0px 17px 1px rgba(0,0,0,0.26);
    box-shadow: 0px 0px 17px 1px rgba(0,0,0,0.26);
}

.popup h3 {
  margin: 5px 0;
  color: #333;
  text-transform: uppercase;
  font-size: 14px;
}
.popup .close {
  position: absolute;
  top: 5px;
  right: 15px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #c1c3fb;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}
.row {
    display: flex;
    text-decoration: none;
    
}
.column{
  display: flex;
  flex-direction:column;
   padding-left:15px;
}

.col-title{
  text-transform: uppercase;
 ...