Floating CTA

How to?

  1. Build up floating CTA with the HTML code below
  2. Paste the CSS code to control style

HTML:

				
					<!-- Floating icon bar Starts -->
<div class="float-sm">
    <div class="fl-fl float-employee">
        <span><i class="fas fa-user-tie"></i></span>
        <a href="/employee-portal/" class="ld-button"> Employee Portal</a>
    </div>
    <div class="fl-fl float-provider">
        <span><i class="fas fa-user-md"></i></span>
        <a href="/provider-portal/">Provider Portal</a>
    </div>
    <div class="fl-fl float-bill">
        <span><i class="fas fa-money-check"></i></span>
        <a href=" https://www.paystation.com/pay/multicare-cascade" target="_blank">Bill Payment</a>
    </div>
</div>

CSS:

				
					/* Floating CTA Bar Style */

.fl-fl {
    background: #0a84c7;
    width: 235px;
    position: fixed;
    right: -175px;
    z-index: 1000;
    font: normal normal 10px Arial;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
}

.fl-fl span {
    width: 60px;
    height: 60px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.fl-fl i,
.fl-fl svg {
    font-size: 20px;
    color: #fff;
}

.fl-fl:hover {
    right: 0;
}

.fl-fl a {
    color: #fff !important;
    text-decoration: none;
    font-size: 16px;
    padding-left: 20px;
}

/* position of bars */
.float-employee {
    top: 200px;
}
.float-provider {
    top: 262px;
}
.float-bill {
    top: 324px;
}

/* color of each bars */
.float-employee span {
    background-color: #0b97d6;
}
.float-provider {
    background-color: #0863a9;
}
.float-provider span {
    background-color: #0468b3;
}
.float-bill {
    background-color: #253b50;
}
.float-bill span {
    background-color: #2b4157;
}

Example: Check out the floating bars on the right >>>

Employee Portal
Provider Portal
Bill Payment