CTA-BTN

by Dhanck

HTML

<div class="parla-cta">
    <a href="" class="row link">
      <div>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 20 20" version="1.1">
          <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="#c1c3fb" 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>
      </div>
      <div class="column">
        <div class="col-title">Book Appointment</div>
        <div class="col-description">Contact Support to find help with delivery, sales or anything else.</div>
      </div>
      </a>
  </div>
  <a class="parla-cta-btn">
    Book Appointment
  </a>
  <a class="parla-cta-btn">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 20 20" version="1.1">
          <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"...

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
.parla-cta {
    font-family: 'Montserrat', sans-serif;
}
.row {
    display: flex;
    text-decoration: none;
    
}
.column{
  display: flex;
  flex-direction:column;
   padding-left:15px;
   justify-content: center;
}

.col-title{
  text-transform: uppercase;
  font-size: 14px;
    font-weight: 600;
}
.col-description{
   text-transform: capitalize;
  font-size: 12px;
  font-weight: 400;
}
.link {
    border: 2px solid #c1c3fb;
    border-radius: 8px;
    padding: 5px;
    margin-bottom: 5px;
}

.parla-cta-btn{  
  display: block;
  font-family: 'Montserrat', sans-serif;
  background: #c1c3fb;
  color: #fff;
  width: fit-content;
  padding: 10px 25px;
  margin: 15px;
  cursor: pointer;
}

@media screen and (max-width: 700px){
  
}