<commit_before>---
title:  'Building a "Pacman arrow" micro-interaction with CSS'
meta: 
  description: 'Learn how to build a beautiful arrow micro-interaction with CSS.'
  image: '/images/posts/css-arrow-interaction/social.gif'
---

I helped build the [Asana for Marketers](https://asana.com/teams/marketing) page with [<NAME>](http://jacoviello.com/) while I was still at Asana. Part of this work involved making a neat micro-interaction for an arrow icon that Devin wanted to use throughout the page. Today I am going to walk you through how I created this interaction and why I built it the way that I did. 

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="result" data-user="keenanpayne" data-slug-hash="mdVRrGm" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS &amp;quot;pacman arrow&amp;quot; micro-interaction">
  <span>See the Pen <a href="https://codepen.io/keenanpayne/pen/mdVRrGm">
  CSS &quot;pacman arrow&quot; micro-interaction</a> by <NAME> (<a href="https://codepen.io/keenanpayne">@keenanpayne</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

Our goal is to create an animation of an arrow following itself (hence the name "Pacman arrow") when we hover over an element on the page. We also want this interaction to exist in multiple elements throughout the page, so it is essential to build this in a context-agnostic way.

## Writing the markup
We'll start by writing the markup for this interaction. For this tutorial, I will be putting this arrow animation inside of a `<button>` element with some accompanying text. However, once you finish this tutorial, you should be able to use this interaction inside of any element. 

{% include components/codepen.html
tab='html,result'
html='<button>
  Just Do It
  
  <div class="arrowPacman">
    <div class="arrowPacman-clip"><commit_msg>Update meta description<commit_after>---
title:  'Building a "Pacman arrow" micro-interaction with CSS'
meta: 
  description: 'Learn how to build a beautiful "pacman arrow" micro-interaction with CSS.'
  image: '/images/posts/css-arrow-interaction/social.gif'
---

I helped build the [Asana for Marketers](https://asana.com/teams/marketing) page with [<NAME>](http://jacoviello.com/) while I was still at Asana. Part of this work involved making a neat micro-interaction for an arrow icon that Devin wanted to use throughout the page. Today I am going to walk you through how I created this interaction and why I built it the way that I did. 

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="result" data-user="keenanpayne" data-slug-hash="mdVRrGm" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS &amp;quot;pacman arrow&amp;quot; micro-interaction">
  <span>See the Pen <a href="https://codepen.io/keenanpayne/pen/mdVRrGm">
  CSS &quot;pacman arrow&quot; micro-interaction</a> by <NAME> (<a href="https://codepen.io/keenanpayne">@keenanpayne</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

Our goal is to create an animation of an arrow following itself (hence the name "Pacman arrow") when we hover over an element on the page. We also want this interaction to exist in multiple elements throughout the page, so it is essential to build this in a context-agnostic way.

## Writing the markup
We'll start by writing the markup for this interaction. For this tutorial, I will be putting this arrow animation inside of a `<button>` element with some accompanying text. However, once you finish this tutorial, you should be able to use this interaction inside of any element. 

{% include components/codepen.html
tab='html,result'
html='<button>
  Just Do It
  
  <div class="arrowPacman">
    <div class="arrowPacman-clip">
{'fraction_non_alphanumeric': 0.11653313911143481, 'fraction_numerical': 0.004855547462976451, 'mean_word_length': 4.754189944134078, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 39, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5925030', 'n_tokens_mistral': 1279, 'n_tokens_neox': 1233, 'n_words': 486}