5 Simple & Attractive Styles for Back to top button in WordPress

For Bloggers, or for any website back to top button is important to reach the top with a click, we might see this button on different websites with attractive styles and shapes, here I will provide codes for such shapes and Styles for Back to top button in WordPress.

Before adding styles to the button some may feel confused to access back to top button in WordPress first, we will see how to add the Back-to-Top button to your WordPress website and the codes to design your back-to-top button.

Also Read: The 10 Best Blogging Plugins for WordPress

How to add back to top button in WordPress

To add a Back-to-Top button you need to login into your WordPress dashboard, and click on Customization which is available in the Appearance section (on the left side of your WordPress Panel), go to the layout section and footer section, and after scrolling a bit own you will find Back to Top Button showing disable. Click on it, then select Enable to add back to the top button.

In Short:
Login to WordPress > Appearance > Customization > Layout > Footer > Back to Top Button > Enable.

CSS Styles for Back to top button in WordPress

Most of the sites will use the default button for their website which will look simple and transparent black background because of the difficulty in finding the location of the code. You might have knowledge in HTML, and CSS (Learn HTML & CSS now) when you come to designing a web page or website from scratch you may have an idea of how and where the things we placed.

In WordPress we work mostly with plugins, using a lot of plugins will ultimately lower the speed of your website. SO these CSS codes will solve that problem, and provides you with the style that you are looking for.

Note: Make sure that does not disturb any pre-defined code in your website and copy the code which you are willing to add to your website and paste it on the Additional CSS option.

Navigation to Additional CSS:

Login to WordPress > Appearance > Customization > Additional CSS

Triangle Shape Back to Top Button

This Triangle button will reshape your square back to the top button to a triangle shape, you can change your required color at the border-bottom: 25px solid #00f; from the below code.

/* -----------_Lets Explore Tech_-------------*/
/* Triangle back to top CSS Starts */
.generate-back-to-top {
	height:0;
	width:0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 25px solid #00f;
	background-color: #ffffff00!important;
}
.icon-arrow-up{
	display:none;
}
.generate-back-to-top:hover{
	border-bottom: 25px solid #00ddff;
}

/* Triangle back to top CSS End*/
/* -----------_Lets Explore Tech_-------------*/

Circle Shape Back to Top Button

This Circle Shape button code will reshape your pre-defined back to the top button to a Circle shape, you can change your required color at background-color: #cf0000; from the below code. I have added a hover effect to the button so if you are willing to change the color after hovering you can change it from .generate-back-to-top:hover{}. Simply you need to add background-color: #Your_Required_Color_Code;

/* -----------_Lets Explore Tech_-------------*/
/* Circle Back to Top */
.generate-back-to-top {
  background-color: #cf0000;
  border-radius: 50%;
}
.generate-back-to-top:hover{
	opacity: 0.8!important;
	box-shadow: #000 1px 1px 10px;
}
/* -----------_Lets Explore Tech_-------------*/

Also Check: Best Chrome Extensions for Bloggers in 2022

Oval Shape Back to Top Button

It is the same as the above codes with an added skew property which gives some rotation to the circle shape.

/* -----------_Lets Explore Tech_-------------*/
/* Oval shape back to top CSS Starts */
.generate-back-to-top {
	width: 20px;
	height: 60px;
	transform: skew(15deg);
	background: #00aaff!important;
	border-radius:50%;
	opacity: 1!important;
}
.icon-arrow-up{
	color: red;
}
.generate-back-to-top:hover{
	opacity: 0.8!important;
	box-shadow: #000 0px 5px 10px;
}
/* Oval shape back to top CSS Ends*/
/* -----------_Lets Explore Tech_-------------*/

Square Shape Back to Top Button

This code will not do major changes to the shape, it will simply cut the sharpness of borders.

/* Square Style */
.generate-back-to-top {
	border-radius: 10px;
  background-color: #cf0000;
}
.generate-back-to-top:hover{
	opacity: 0.8!important;
	box-shadow: #000 1px 1px 10px;
}

Also Check: GeneratePress Customization Code

Summary

Hope you like the shapes and Styles for Back to top button in WordPress, If you are looking for a new and attractive shape or animation for your button please use the comments section below, I will provide the code for that and If you have better codes please share them below to help Blogger community.