How to Create Floating Get in Touch Button with html and css
Floating Get in Touch Button with html and css
floating action button is used to perform the main action on a page or view. Typically it is round, brightly colored and, as the name suggests, floats above the view to draw the users attention. Also, it should have some sort of animation upon focus and click events to give users visual feedback.
This floating Get in touch button is fully responsive and works great with smaller devices like mobile and tablets.
Adding this button will make it very easier and fast for your audience to contact you.
How to install this Floating Button on your Blogger Template
First, open Blogger >> Themes >> Edit HTML >> Then add this CSS code before </head>
<style>
.social-button-container { position: fixed; right: 0; bottom: 80px; transform: translateX(100%); transition: transform 0.4s ease-in-out;z-index: 999; } .social-button-container.visible { transform: translateX(-10px);z-index: 999; } .social-button { border-radius: 16px;background: -webkit-linear-gradient(to right, #ee0979, #ff6a00); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #ee0979, #ff6a00);height: 50px; box-shadow: 0 10px 20px 0 rgba(30,30,30,.07); display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; height: 169px; width: 370px; max-width: calc(100% - 10px);border: 1px solid #ebeced; } .social-button button.close-btn { border: 0; color: #fff;background: none; cursor: pointer; font-size: 20px; position: absolute; top: 5px; right: 5px; } .social-button button.close-btn:focus { outline: none; } .social-button p { background-color:#fefefe; border-radius: 10px 10px 0px 0px; color: #000; font-size: 12px; line-height: 18px; padding: 2px 17px 0px; position: absolute; bottom: 0; left: 50%; margin: 0; transform: translateX(-50%); text-align: center; width: 235px; } .social-button p a { color: #FF7500; text-decoration: none; } .social-button h4 { margin-top: -22px;margin-bottom: 20px; color: #fff; font-size: 14px; line-height: 18px; text-transform: uppercase; } .social-button ul { display: flex; list-style-type: none; padding: 0; margin: 0; } button{border:none} .social-button ul li { margin: 0 10px; } .social-button ul li a svg{height: 24px; width: 24px; fill:#fff} .social-button ul li a { border: 1px solid #fff; border-radius: 50%; color: #001F61; font-size: 20px; display: flex; justify-content: center; align-items: center; height: 50px; width: 50px; text-decoration: none; } .social-button ul li a:hover { border: none; box-shadow: 0 9px 12px -9px #FF6A00; } .floating-btn svg{vertical-align: -12px;width: 24px; height: 24px;} .floating-btn { border-radius: 50px; background: -webkit-linear-gradient(to right, #ee0979, #ff6a00); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #ee0979, #ff6a00);padding: 6px 8px;color: #fff;right: 20px; cursor: pointer; position: fixed; bottom: 70px; z-index: 999;outline:none } .floating-btn:focus { outline: none; } @media screen and (max-width: 480px) { .social-panel-button.visible { transform: translateX(0px); } .floating-btn { } }
</style>
Next, add the code in <body>
<div class='social-button-container'>
<div class='social-button'>
<p>Created with by
<a href='/' target='_blank'>ANUTRICKZ</a></p>
<button class='close-btn'><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
</svg></button>
<h4>Get in touch on</h4>
<ul>
<li>
<a href='https://www.facebook.com/anutrickz' target='_blank' title='facebook'>
<svg viewBox='0 0 512 512'>
<path d='M288,176v-64c0-17.664,14.336-32,32-32h32V0h-64c-53.024,0-96,42.976-96,96v80h-64v80h64v256h96V256h64l32-80H288z'/>
</svg>
</a>
</li>
<li>
<a href='https://t.me/anutrickz' target='_blank' title='telegram'>
<svg viewBox='0 0 24 24'><path d='M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z'/></svg>
</a>
</li>
<li>
<a href='https://www.youtube.com/c/AnuTrickz' target='_blank' title='youtube'>
<svg viewBox='0 0 512 512'>
<path d='M490.24,113.92c-13.888-24.704-28.96-29.248-59.648-30.976C399.936,80.864,322.848,80,256.064,80 c-66.912,0-144.032,0.864-174.656,2.912c-30.624,1.76-45.728,6.272-59.744,31.008C7.36,138.592,0,181.088,0,255.904 C0,255.968,0,256,0,256c0,0.064,0,0.096,0,0.096v0.064c0,74.496,7.36,117.312,21.664,141.728 c14.016,24.704,29.088,29.184,59.712,31.264C112.032,430.944,189.152,432,256.064,432c66.784,0,143.872-1.056,174.56-2.816 c30.688-2.08,45.76-6.56,59.648-31.264C504.704,373.504,512,330.688,512,256.192c0,0,0-0.096,0-0.16c0,0,0-0.064,0-0.096 C512,181.088,504.704,138.592,490.24,113.92z M192,352V160l160,96L192,352z'/>
</svg>
</a>
</li>
<li>
<a href='https://www.instagram.com/web.man.anupam' target='_blank' title='instagram'>
<svg fill='#3f729b' viewBox='0 0 512.00096 512.00096'><path d='m373.40625 0h-234.8125c-76.421875 0-138.59375 62.171875-138.59375 138.59375v234.816406c0 76.417969 62.171875 138.589844 138.59375 138.589844h234.816406c76.417969 0 138.589844-62.171875 138.589844-138.589844v-234.816406c0-76.421875-62.171875-138.59375-138.59375-138.59375zm-117.40625 395.996094c-77.195312 0-139.996094-62.800782-139.996094-139.996094s62.800782-139.996094 139.996094-139.996094 139.996094 62.800782 139.996094 139.996094-62.800782 139.996094-139.996094 139.996094zm143.34375-246.976563c-22.8125 0-41.367188-18.554687-41.367188-41.367187s18.554688-41.371094 41.367188-41.371094 41.371094 18.558594 41.371094 41.371094-18.558594 41.367187-41.371094 41.367187zm0 0'/><path d='m256 146.019531c-60.640625 0-109.980469 49.335938-109.980469 109.980469 0 60.640625 49.339844 109.980469 109.980469 109.980469 60.644531 0 109.980469-49.339844 109.980469-109.980469 0-60.644531-49.335938-109.980469-109.980469-109.980469zm0 0'/><path d='m399.34375 96.300781c-6.257812 0-11.351562 5.09375-11.351562 11.351563 0 6.257812 5.09375 11.351562 11.351562 11.351562 6.261719 0 11.355469-5.089844 11.355469-11.351562 0-6.261719-5.09375-11.351563-11.355469-11.351563zm0 0'/></svg>
</a>
</li>
</ul>
</div>
</div>
<button class='floating-btn'>
<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg>
</button>
After that , add the code below before </body>
<script>
//<![CDATA[
const floating_btn = document.querySelector('.floating-btn'); const close_btn = document.querySelector('.close-btn'); const social_panel_container = document.querySelector('.social-button-container'); floating_btn.addEventListener('click', () => { social_panel_container.classList.toggle('visible') }); close_btn.addEventListener('click', () => { social_panel_container.classList.remove('visible') });
//]]>
</script>
Then Save Theme .
This is How to Create Floating Get in Touch Button with html and css . Hopefully it can be useful and see you next posting. Best regards, Anutrickz.blogspot.com
