Mobile Call-To-Action Button Panel (Sticky)
HTML
<div class="mobile-sticky-cta">
<a href="tel:07 000 1111">
<span class="icon icon-phone"></span>Click-To-Call</a>
<a class="primary-cta" href="#">
<span class="icon icon-calendar"></span>Book Online</a>
</div>
CSS
* {box-sizing:border-box;}
body {padding-bottom:45px;}
.icon {
display: inline-block;
width: 18px;
height: 18px;
background-size: contain;
background-repeat: no-repeat;
position: relative;
top: 4px;
margin-right: 12px;
}
.icon-calendar {
max-width: 256px;
max-height: 256px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDQ3Ny44NjcgNDc3Ljg2NyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cgk8Zz4KCQk8cGF0aCBkPSJNMTE5LjQ2NywwQzExMC4wNDEsMCwxMDIuNCw3LjY0MSwxMDIuNCwxNy4wNjdWNTEuMmgzNC4xMzNWMTcuMDY3QzEzNi41MzMsNy42NDEsMTI4Ljg5MiwwLDExOS40NjcsMHoiIGZpbGw9IiNmZmZmZmYiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIHN0eWxlPSIiIGNsYXNzPSIiPjwvcGF0aD4KCTwvZz4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgoJPGc+CgkJPHBhdGggZD0iTTM1OC40LDBjLTkuNDI2LDAtMTcuMDY3LDcuNjQxLTE3LjA2NywxNy4wNjdWNTEuMmgzNC4xMzNWMTcuMDY3QzM3NS40NjcsNy42NDEsMzY3LjgyNiwwLDM1OC40LDB6IiBmaWxsPSIjZmZmZmZmIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBzdHlsZT0iIiBjbGFzcz0iIj48L3BhdGg+Cgk8L2c+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxnPgoJCTxwYXRoIGQ9Ik00MjYuNjY3LDUxLjJoLTUxLjJ2NjguMjY3YzAsOS40MjYtNy42NDEsMTcuMDY3LTE3LjA2NywxNy4wNjdzLTE3LjA2Ny03LjY0MS0xNy4wNjctMTcuMDY3VjUxLjJoLTIwNC44djY4LjI2NyAgICBjMCw5LjQyNi03LjY0MSwxNy4wNjctMTcuMDY3LDE3LjA2N3MtMTcuMDY3LTcuNjQxLTE3LjA2Ny0xNy4wNjdWNTEuMkg1MS4yQzIyLjkyMyw1MS4yLDAsNzQuMTIzLDAsMTAyLjR2MzI0LjI2NyAgICBjMCwyOC4yNzcsMjIuOTIzLDUxLjIsNTEuMiw1MS4yaDM3NS40NjdjMjguMjc3LDAsNTEuMi0yMi45MjMsNTEuMi01MS4yVjEwMi40QzQ3Ny44NjcsNzQuMTIzLDQ1NC45NDQsNTEuMiw0MjYuNjY3LDUxLjJ6ICAgICBNNDQzLjczMyw0MjYuNjY3YzAsOS40MjYtNy42NDEsMTcuMDY3LTE3LjA2NywxNy4wNjdINTEuMmMtOS40MjYsMC0xNy4wNjctNy42NDEtMTcuMDY3LTE3LjA2N1YyMDQuOGg0MDkuNlY0MjYuNjY3eiIgZmlsbD0iI2ZmZmZmZiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgc3R5bGU9IiIgY2xhc3M9IiI+PC9wYXRoPgoJPC9nPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cgk8Zz4KCQk8cGF0aCBkPSJNMzUzLjQwOCwyNDMuOTQyYy02LjY2NC02LjY2OS0xNy40NzItNi42NzItMjQuMTQxLTAuMDA5TDIwNC44LDM2OC40MDFsLTU2LjIwMS01Ni4yMDEgICAgYy02LjY2OS02LjY2NC0xNy40NzctNi42Ni0yNC4xNDEsMC4wMDljLTYuNjY0LDYuNjY5LTYuNjYsMTcuNDc3LDAuMDA5LDI0LjE0MWw2OC4yNjcsNjguMjY3YzYuNjY1LDYuNjYzLDE3LjQ2OCw2LjY2MywyNC4xMzIsMCAgICBMMzUzLjQsMjY4LjA4M0MzNjAuMDY4LDI2MS40MTksMzYwLjA3MiwyNTAuNjExLDM1My40MDgsMjQzLjk0MnoiIGZpbGw9IiNmZmZmZmYiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIHN0eWxlPSIiIGNsYXNzPSIiPjwvcGF0aD4KCTwvZz4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8L2c+PC9zdmc+);
}
.icon-phone {
max-width: 256px;
max-height: 256px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDU4IDU4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiBjbGFzcz0iIj48Zz48ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJQYWdlLTEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9IjAwMy0tLUNhbGwiIGZpbGw9InJnYigwLDAsMCkiIGZpbGwtcnVsZT0ibm9uemVybyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEpIj48cGF0aCBpZD0iU2hhcGUiIGQ9Im0yNS4wMTcgMzMuOTgzYy01LjUzNi01LjUzNi02Ljc4Ni0xMS4wNzItNy4wNjgtMTMuMjktLjA3ODc5OTQtLjYxMzI4MjguMTMyMjQ4MS0xLjIyODMxNDQuNTcxLTEuNjY0bDQuNDgtNC40NzhjLjY1OTAxMzYtLjY1ODYwNjYuNzc1OTYyOS0xLjY4NTAyNC4yODItMi40NzVsLTcuMTMzLTExLjA3NmMtLjU0NjQ4MzctLjg3NDc1MTM0LTEuNjY4NTYyNC0xLjE5MDQ1Nzc3LTIuNTkxLS43MjlsLTExLjQ1MSA1LjM5M2MtLjc0NTk0MTE3LjM2NzMwOC0xLjE4NDY5MzM4IDEuMTU5ODU0MDUtMS4xIDEuOTg3LjYgNS43IDMuMDg1IDE5LjcxMiAxNi44NTUgMzMuNDgzczI3Ljc4IDE2LjI1NSAzMy40ODMgMTYuODU1Yy44MjcxNDYuMDg0NjkzNCAxLjYxOTY5Mi0uMzU0MDU4OCAxLjk4Ny0xLjFsNS4zOTMtMTEuNDUxYy40NTk3MzA3LS45MjA0NDc0LjE0NjExNC0yLjAzOTUxODQtLjcyNS0yLjU4N2wtMTEuMDc2LTcuMTMxYy0uNzg5NTI1OS0uNDk0NDc4OS0xLjgxNTg5NjctLjM3ODM2NDItMi40NzUuMjhsLTQuNDc4IDQuNDhjLS40MzU2ODU2LjQzODc1MTktMS4wNTA3MTcyLjY0OTc5OTQtMS42NjQuNTcxLTIuMjE4LS4yODItNy43NTQtMS41MzItMTMuMjktNy4wNjh6IiBmaWxsPSIjZmZmZmZmIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBzdHlsZT0iIiBjbGFzcz0iIj48L3BhdGg+PHBhdGggaWQ9IlNoYXBlIiBkPSJtNDcgMzFjLTEuMTA0NTY5NSAwLTItLjg5NTQzMDUtMi0yLS4wMDkzNjg1LTguMjgwMzg3Ni02LjcxOTYxMjQtMTQuOTkwNjMxNS0xNS0xNS0xLjEwNDU2OTUgMC0yLS44OTU0MzA1LTItMnMuODk1NDMwNS0yIDItMmMxMC40ODg2MTI2LjAxMTU3MzUgMTguOTg4NDI2NSA4LjUxMTM4NzQgMTkgMTkgMCAxLjEwNDU2OTUtLjg5NTQzMDUgMi0yIDJ6IiBmaWxsPSIjZmZmZmZmIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBzdHlsZT0iIiBjbGFzcz0iIj48L3BhdGg+PHBhdGggaWQ9IlNoYXBlIiBkPSJtNTcgMzFjLTEuMTA0NTY5NSAwLTItLjg5NTQzMDUtMi0yLS4wMTU0MzA5LTEzLjgwMDcyMi0xMS4xOTkyNzgtMjQuOTg0NTY5MS0yNS0yNS0xLjEwNDU2OTUgMC0yLS44OTU0MzA1LTItMnMuODk1NDMwNS0yIDItMmMxNi4wMDg5NDcuMDE3NjM1ODcgMjguOTgyMzY0MSAxMi45OTEwNTMgMjkgMjkgMCAuNTMwNDMzLS4yMTA3MTM3IDEuMDM5MTQwOC0uNTg1Nzg2NCAxLjQxNDIxMzYtLjM3NTA3MjguMzc1MDcyNy0uODgzNzgwNi41ODU3ODY0LTEuNDE0MjEzNi41ODU3ODY0eiIgZmlsbD0iI2ZmZmZmZiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgc3R5bGU9IiIgY2xhc3M9IiI+PC9wYXRoPjwvZz48L2c+PC9nPjwvc3ZnPg==);
}
.mobile-sticky-cta {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
font-size: 0;
box-shadow: 0 0 4px 1px rgb(0 0 0 / 22%);
z-index: 20;
}
.mobile-sticky-cta .icon-phone {
background-size: 17px;
}
.mobile-sticky-cta a {
display: inline-block;
width: 50%;
background-color: #7e268b;
padding: 12px 15px;
font-size: 16px;
text-align: center;
color: #fff;
text-decoration:none;
}
.mobile-sticky-cta .primary-cta {
background-color: #80bd3d;
font-weight: 700;
text-shadow: 1px 1px 1px #447110;
letter-spacing: .75px;
}
/* Uncomment this media query to only show the sticky call-to-action buttons on smaller devices.
@media (min-width: 996px) {
body {padding-bottom:0;}
.mobile-sticky-cta {display: none;}
}
*/
