Click Below to
Get the Right Info
D.I.Y. Building Myself HOME OWNER Need Installer TRADE For a Client SPECIFIER Tech Details GET A QUOTE

Clickdeck Assets

QUANTITY / COLOUR CODE
Beam Member Profile 1.2m 2.4m 3.6m 4.8m 6m
Joist 55PROFILE 3 15
Bearer 55PROFILE 12
Perimeter Joist 55PROFILE 12
Fascia Support 55PROFILE 8
Stair Kit 55PROFILE 3
Stair Kit 110PROFILE 8

Back to Drawing

➜
BACK TO DRAWING
HTML 
<a href="#" class="clickdeck-back">
  <div class="cd-back-arrow">➜</div>
  <div class="cd-back-text">BACK TO DRAWING</div>
</a>
CSS 
.clickdeck-back {
  display:flex;align-items:center;justify-content:space-between;
  background:#FFE300;color:#24272A;font-family:"Inter",sans-serif;
  padding:22px 28px;border:none;border-radius:12px;text-decoration:none;cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.10);transition:.25s;
}
.clickdeck-back:hover {
  background:#24272A!important;color:#FFE300!important;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.cd-back-text{font-weight:800;font-size:20px;text-transform:uppercase;}
.cd-back-arrow{font-size:34px;font-weight:800;transform:rotate(180deg);transition:.25s;}
.clickdeck-back:hover .cd-back-arrow{transform:rotate(180deg) translateX(6px);}
@media(max-width:640px){
  .clickdeck-back{flex-direction:column;text-align:center;padding:18px;}
  .cd-back-text{font-size:18px;}
  .cd-back-arrow{font-size:28px;margin-top:8px;}
}

Proceed To

PROCEED TO:
  • Request Delivery Quote
  • Material List
  • Build Drawing
➜
HTML 
<a href="#" class="clickdeck-button">
  <div class="cd-btn-text">
    <span class="cd-btn-heading">PROCEED TO:</span>
    <ul>
      <li>Request Delivery Quote</li>
      <li>Material List</li>
      <li>Build Drawing</li>
    </ul>
  </div>
  <div class="cd-btn-arrow">➜</div>
</a>
CSS 
.clickdeck-button {
  display:flex;align-items:center;justify-content:space-between;
  background:#FFE300;color:#24272A;font-family:"Inter",sans-serif;
  padding:22px 32px;border:none;border-radius:12px;text-decoration:none;cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.10);transition:.25s;
}
.clickdeck-button:hover {
  background:#24272A!important;color:#FFE300!important;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.cd-btn-text{display:flex;flex-direction:column;gap:6px;}
.cd-btn-heading{font-weight:800;font-size:22px;text-transform:uppercase;}
.cd-btn-text ul{margin:0;padding:0;list-style:none;}
.cd-btn-text li{font-size:15px;font-weight:500;line-height:1.4;}
.cd-btn-arrow{font-size:34px;font-weight:800;transition:.25s;}
.clickdeck-button:hover .cd-btn-arrow{transform:translateX(6px);}
@media(max-width:640px){
  .clickdeck-button{flex-direction:column;text-align:center;padding:18px 20px;}
  .cd-btn-heading{font-size:18px;}
  .cd-btn-arrow{font-size:28px;margin-top:8px;}
  .cd-btn-text ul{display:none;}
}