BUTTONS

Icon Arrow Button

A clean call-to-action button with an animated arrow that moves on hover. Copy the code and use it in your own project.

HTML
<button class="arrow-btn">
  <span>Explore More</span>
  <span class="arrow-icon">→</span>
</button>
CSS
.arrow-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  border:1px solid #22d3ee;
  border-radius:10px;
  background:transparent;
  color:#ffffff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.arrow-icon{
  display:inline-block;
  font-size:20px;
  line-height:1;
  transition:transform .25s ease;
}

.arrow-btn:hover{
  background:#22d3ee;
  border-color:#22d3ee;
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(34,211,238,.22);
}

.arrow-btn:hover .arrow-icon{
  transform:translateX(6px);
}

How This Icon Arrow Button Works

The Icon Arrow Button uses a simple hover effect to add movement to a call-to-action button. Its HTML contains a button with two span elements: one displays the “Explore More” text, while the second uses the arrow-icon class to display the arrow.

The button uses inline-flex to keep the text and arrow aligned in a single row, with a 10px gap between them. In its default state, the button has a transparent background, a cyan border, and white text.

When the button is hovered, CSS changes the background to #22d3ee, moves the entire button upward by 2px with the transform property using translateY(-2px), and adds a cyan-tinted box shadow. At the same time, .arrow-btn:hover .arrow-icon moves the arrow 6px to the right using translateX(6px).

Both the button and arrow use .25s ease transitions, so the hover changes animate instead of appearing instantly. The arrow animation itself does not require JavaScript; it is handled entirely by CSS.

Customizing This Icon Arrow Button

You can adjust the button’s appearance and hover movement directly in the CSS:

  • Change the arrow movement — the translateX(6px) value controls how far the arrow moves to the right on hover.
  • Adjust the button lift — translateY(-2px) controls how far the entire button moves upward.
  • Change the button color — replace #22d3ee in the border and hover background with another color.
  • Adjust the spacing — the 10px gap controls the space between the “Explore More” text and the arrow.
  • Change the animation speed — the .25s ease transitions control how quickly the hover effects animate.

Where to Use This Icon Arrow Button

The Icon Arrow Button works well where a button or call-to-action needs a simple directional cue alongside its text.

  • Landing page buttons, such as “Explore More,” “Learn More,” or other links leading users to additional content.
  • Portfolio project links, where the arrow can accompany a button that opens a project or case study.
  • Product or feature sections, for buttons that lead to more details about an item or feature.
  • Blog and article links, where the button can be used for a “Read More” or similar action.

The arrow moves 6px to the right on hover while the button moves 2px upward, combining two small CSS transforms in the same hover interaction.

Looking for another hover-based interaction? Check out our Magnetic Hover Button to see a button that moves toward the cursor using JavaScript.

Frequently Asked Questions

Does the arrow animation require JavaScript?
No. The arrow movement is created entirely with CSS using the :hover state and transform: translateX(6px).

Why does the whole button move upward on hover?
The .arrow-btn:hover rule applies transform: translateY(-2px), which moves the button 2 pixels upward from its normal position.

Can I change how far the arrow moves?
Yes. Change the 6px value inside translateX(6px). A larger value moves the arrow farther to the right, while a smaller value reduces the movement.

How can I change the hover color?
Change the #22d3ee value used for the button’s border and hover background. The same color is also used in the hover box shadow with an RGBA value.

The button keeps its default position until the user hovers over it. When the pointer leaves, the CSS transitions return both the button and arrow to their original positions.

Scroll to Top