---
title: How to Customize the Back Button (Color, Style, Position, Icon)
description: Customize the WordPress back button color, style, position and icon with widget fields, shortcode attributes and a little CSS.
url: "https://wpfactory.com/docs/how-to-customize-the-back-button-color-style-position-icon/"
updated: "2026-10-05"
category: How to
tags:
  - Back Button Widget for WordPress
---

# How to Customize the Back Button (Color, Style, Position, Icon)

You can restyle the button from [Back Button Anywhere Widget for WordPress](https://wpfactory.com/item/back-button-widget-wordpress-plugin/) without editing plugin files, using the widget fields, shortcode attributes, and a little CSS. Settings referenced are under **WPFactory > Back Button**.

### Common symptoms

- The button uses default styling that does not match your theme.
- The shortcode outputs plain text instead of a styled button.
- Centering or color changes have no effect.
- A Font Awesome icon shows as a small square.

### 1. Set color and style with the shortcode

Use the `style` and `class` attributes to control appearance:

```
[alg_back_button label="Back" style="background-color:#007BFF;color:#ffffff;padding:10px 20px;border:none;border-radius:4px;"]
```

The widget has the same controls: **Button HTML style** and **Button HTML class**. Set **Button type** to **Button** for a form button, or **Simple text** for a text link.

### 2. Add an icon

Use the `fa` and `fa_template` attributes for an icon with text:

```
[alg_back_button fa="fas fa-chevron-left" fa_template="%icon% Back" class="my-back-btn"]
```

Font Awesome is a free feature. If the icon shows as a square, the library is not loaded, so enable **Load** in the Font Awesome section (or, if your theme already loads Font Awesome, leave Load off to avoid a conflict). See [Font Awesome icon not showing](https://wpfactory.com/docs/font-awesome-icon-not-showing/).

### 3. Position and center with CSS

For layout tweaks such as centering, target your class in the theme's custom CSS:

```
.my-back-btn {
  display: block;
  margin: 0 auto;
  text-align: center;
}
```

### 4. Position a floating button (Pro)

For the floating button, use **Floating Button Options**: pick one of the four corners and set the Horizontal and Vertical margins (both default to 40 px). If it lands off screen, reduce the margins. For advanced styling, enable **Set as shortcode** and supply your own `[alg_back_button ...]` that keeps the `alg_back_button_floating` class.

### 5. Test after changes

Clear your browser and site caches, then check the page. On a block theme or page builder, verify the result on the front end.

**Tip:** keep custom CSS in a child theme or the Customizer's Additional CSS box so it survives plugin and theme updates.

### Need a hand?

Our team answers every ticket on the [Back Button Widget support forum](https://wpfactory.com/support/item/back-button-widget-wordpress-plugin/).

Related articles

- [How to Add a Font Awesome Icon to the Back Button](https://wpfactory.com/docs/add-font-awesome-icon-to-back-button/)
- [How to Translate the Back Button](https://wpfactory.com/docs/translate-the-back-button/)
- [Getting Started with Back Button Widget](https://wpfactory.com/docs/using-back-button-widget/)
- [How to Add a Floating Back Button](https://wpfactory.com/docs/add-floating-back-button/)
- [How to Add the Back Button to a WordPress Menu](https://wpfactory.com/docs/add-back-button-to-wordpress-menu/)

 

[![Back Button Widget for WordPress](https://wpfactory.com/wp-content/uploads/Back-Button-Widget.webp)](https://wpfactory.com/item/back-button-widget-wordpress-plugin/)