I was amazed to see how many plugins are there in the WordPress plugins registry for such a simple task…Most of them require user registration. Why?! I don’t like giving away my email, let alone my mobile phone if I don’t absolutely need to, wrote about it in this post.
Now I’m not against the plugin owners charging for the plugin, they invested their time after all, time is not free, and their plugins usually are much more advanced than what I’m about to show you.
I’ll show you how to build a pure css/html button that when clicked redirects to a link or scrolls to top of the page. Like the subscribe button I already have floating in the top right bottom of the page.
Why Choose SVG Icons & Where to Find Them
If your wp theme uses font icons, then use that. Otherwise, maybe svg would be a better choice.
Font icon libraries add to unnecessary load to your page if you don’t use most of the icons offered in it.
And slower page load equals bad user experience and affects your SEO ranks.
I prefer SVG when I want to add only one or few icons on my page. It’s short for Scalable Vector Graphics and scales without losing quality.
I prefer to use material icons, but there are other resources too. Why not font awesome? You don’t need to download an entire fa library, just copy the svg that you want. Like here:
If you decide to go with font icon library, there’s icomoon which lets you select the vector icons you use and creates a custom font library.
Table of Contents
Style your floating button
Login to wordpress admin, go to customize, find add additional css and paste:
.float{
position: fixed;
/* width: 60px; */
/* height: 60px; */
bottom: 16px;
right: 16px;
background-color: #e91e63;
color: #ffffff;
border-radius: 50px;
text-align: center;
display: flex;
justify-content: center;
padding: 10px;
justify-self: center;
align-items: center;
}
.float svg {
fill: #ffffff;
width: 32px
}
If you want a rounded button, then uncomment width and height. This css is adjusted for a button with icon and text.
Add a Button that opens a link
Then click somewhere at the bottom, footer is good and click to add a widget. Find “Custom html” and paste something like this:
<a href="/newsletter" class="float"> <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-m9simb" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="EmailIcon"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 4-8 5-8-5V6l8 5 8-5z"></path></svg> <span>Subscribe</span></a>
And that’s it! Change the anchor’s href to page which you want to open.
Add a Button that scrolls to top
To be able to scroll to top, your anchor tag needs a “#<yourid>” in the href field, where id is the attribute of your top most tag (Maybe navigation?).
Login to WordPress admin and click to customize, add another widget. Find “Custom html” and paste something like this:
<a href="#top" class="float"> <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-m9simb" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ArrowUpwardIcon"><path d="m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z"></path></svg></a>
Add a Button that starts a phone call
Similar as with other button examples, but href tag equals to “tel:000000” where 000000 is the phone number.
<a href="tel:123123" class="float"> <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-m9simb" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="PhoneIcon"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02z"></path></svg></a>