Back Button Icon Html Css

4 min read Jun 28, 2024

Back Button Icon with HTML and CSS

This article will guide you on how to create a simple back button icon using HTML and CSS. This icon can be used in various contexts, such as websites, web applications, or even mobile apps.

HTML Structure

First, we'll create the basic HTML structure for the back button icon. We'll use a simple div element with a specific class for styling:

CSS Styling

Now, let's style the div element with CSS to visually represent a back button icon:

.back-button {
  width: 30px;
  height: 30px;
  background-color: #f0f0f0;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.back-button::before {
  content: '';
  width: 10px;
  height: 18px;
  border-top: 3px solid black;
  border-left: 3px solid black;
  transform: rotate(-45deg) translateX(-2px);
}

Explanation:

.back-button: This class styles the overall button.
- width, height: Sets the size of the button.
- background-color: Sets the background color.
- border-radius: Rounds the corners of the button.
- display, justify-content, align-items: Centers the content within the button.
- cursor: pointer: Makes the button look like a clickable element.
.back-button::before: This is a pseudo-element used to create the arrow shape.
- content: '';: Creates an empty element.
- width, height: Defines the size of the arrow.
- border-top, border-left: Creates the two sides of the arrow.
- transform: Rotates and translates the arrow to achieve the correct orientation.

Complete Code

Here's the complete HTML and CSS code for the back button icon:

Customization

You can easily customize the appearance of this back button icon by modifying the CSS properties. For example:

Change the color: Modify the background-color and border-top/border-left properties.
Adjust the size: Change the width and height properties.
Use different shapes: Explore different CSS techniques to create a different back button icon shape.

Functionality

This code only creates the visual representation of a back button. To make it functional, you'll need to add JavaScript code that handles the functionality you want (e.g., navigating to the previous page, updating the current state, etc.).