No Time Dad

A blog about web development written by a busy dad

Chipotle Button

Inspiration comes from strange places sometimes. Like an email from Chipotle telling me that I can have free guacamole with my next order. I always open those emails. This time I got a double gift, because in the email I found an interesting button that I thought would be fun to try and replicate.

chipotle_button

I wasn’t really expecting to see a cool looking button in that email, so it was a nice surprise. But, since the button is in an email it’s a little hard for me to see how it’s made. I guess I could open the email on my desktop and take a look, but who has time for that. I certainly don’t.

Lately, I’ve been enjoying not looking at the source code for things I’m trying to recreate and just figuring it out. This doesn’t always work out well for me, but I think it does help me learn.

Getting started

So, there a few things I can tell about the button right off the bat. It has two borders, one green and one black. Well, I say two borders but what I think it actually has is a border and an outline with an offset. The button is also slightly skewed.

The best place for me to start is to make the button with the black border. Then I can work on adding the outline, and skew. I’m on a Tailwindcss kick lately, so that’s what I’ll be using for this button too.

I’ll create a button element and focus on the text first. The text is uppercase and black, both of which can be handled by Tailwind’s uppercase and text-black utility classes. The text is also pretty large and bold, so text-xl and font-bold are in order.

Letter spacing

The other thing I notice about the text in the Chipotle button is that the letters have extra spacing between them. I haven’t actually used the letter-spacing css property anywhere until this point, but it looks like I’ll need it here.

Button without letter spacing:

Button with letter spacing:

I think the second one looks closer to the original button. It won’t be an exact match since Chipotle are probably using some special font that I don’t have, but it’s close enough.

Border and sizing

Next, I’ll add the border, round the corners, and add spacing. The border was a little tricky. I started with Tailwind’s border-4 which is equivalent to border-width: 4px but it seemed thicker than the border on Chipotle’s button. I then went down to border-2, but that felt too thin. So, then I naturally went to border-3, but the border disappeared completely. Now I know that border-3 isn’t an option in Tailwind. I’ll stick with border-2 for now, but I could also create a custom value in my tailwind.config.js for border-width: 3px if I wanted.

The original button is wide. Really wide. I generally use padding to set button sizes, but Tailwind’s left-right padding px-{n} stops at px-16, which still didn’t seem wide enough. I could switch to using width instead, but that sometimes gets messy so I decided to just use px-16. For top-bottom padding I used py-4, which seemed to match the original button well.

Below is the html and a demo of the button so far. Next, I’ll add the green outline.

<button
  type="button"
  class="uppercase text-black text-xl font-bold tracking-wider bg-white border-2 border-black rounded-md px-16 py-4"
>
  Start my order
</button>
Outline

I do think the green outer border can be done with the outline and outline-offset property, but it turns out that outline-offset isn’t really a thing in Tailwind, as far as I can tell. The next best alternative is to use Tailwind’s ring and ring-offset-{n} utility classes, which is a really good option.

The issue with ring-offset-{n} is that it only goes up to 4 out of the box. I think it needs to be slightly larger to match the original button, but I’m going to leave it at 4 for this example to avoid modifying my tailwind.config.js.

The other issue here is that I don’t have the exact color for the outer border that Chipotle is using. It looks like a yellow-ish green, but I ended up just using a neutral ring-green-500. I think using green for action buttons makes a lot of sense, actually. It somehow signals the user to “go” and click the button.

<button
  type="button"
  class="uppercase text-black text-xl font-bold tracking-wider bg-white border-2 border-black rounded-md px-16 py-4 ring ring-green-500 ring-offset-4"
>
  Start my order
</button>
Skewing

The button is looking pretty good now. I just need to apply the skew utility classes to give it that slanted look that the original button has. This can be accomplished via Tailwind’s transform utility class along with it’s skew-y-{n}. I want the button to skew in a direction so that the right corner is up and the left is moving down. The default skew-y-{n} will do the opposite, having the left corner up and right corner down. Luckily, I can use -skew-y-{n} to reverse the skew.

At first, I tried -skew-y-12 but that seemed like way too much skew. I cut it in half and that seemed to be the right amount of skew to match the original button.

<button
  type="button"
  className="uppercase text-black text-xl font-bold tracking-wider bg-white border-2 border-black rounded-md px-16 py-4 ring ring-green-500 ring-offset-4 transform -skew-y-6"
>
  Start my order
</button>

Conclusion & final code

I did eventually look at the source for button, and it turns out that the button is actually an image. I don’t know why they did this, maybe it’s to ensure that the button is always the same size? Hard to say.

I definitely could’ve went deep into custom tailwind.config.js to make this an exact match, but I think it looks good for what it is using the Tailwind defaults. The other thing is, as I mentioned above, I wanted to try and build this button without looking at the source, so it would be tough to get it exactly the same. The important thing is that I tried some new styles that I hadn’t done before, and I ended up with a unique button.

Final code & demo
<button
  type="button"
  className="uppercase text-black text-xl font-bold tracking-wider bg-white border-2 border-black rounded-md px-16 py-4 ring ring-green-500 ring-offset-4 transform -skew-y-6"
>
  Start my order
</button>