From Comp to Code: The Journey of a Button

There’s a lot that goes on between when clients sign off on a design and when the concept comes to life as a page or site. That’s when the front-end developers go to work, and the journey from the design comprehensive, or comp, to code begins. Here’s a glimpse into what goes into the coding process.

In this case, the journey started with a simple question from our lead developer: “Would you like to make a button?”

Sure, that’ll be easy, I thought.

“There are just two minor things,” he added. “The size of the button will need to change based on its content, so you can’t use a height or width in the CSS, and you can only use <button>text</button> — no additional classes or spans can be added to the html.”

Hmm. That makes things a little more interesting. Why, you ask? Well, to accommodate a button with two backgrounds (in this case, solid blue and striped blue), I would typically add a <span> within the <button> html, like this:

After a few different attempts at positioning the backgrounds, however, it quickly became clear there wasn’t a way to make them overlap correctly without using height/width.

Okay, so now I knew I could only use one background image, and would need to figure out a different way to create the solid blue part of the button. Maybe box-shadow would work? After some trial and error, I discovered that I could use an inset box shadow with large vertical/horizontal offsets. I then added transparent borders on the bottom and right to reveal the striped background.

Almost there, but I still wasn’t getting the overlapping effect I needed. The solution? Add a second box shadow with a negative offset to extend the top and left sides of the blue background, then adjust the padding to re-center the text.

And all was perfect — until I started browser testing. In some versions of Internet Explorer there were very thin white lines on the top and left edges of the main box shadow. Fortunately, this was a simple fix. Using pseudo elements, I added thin blue lines to cover the edges:

Because of the project constraints, this simple button turned out to be one of the more challenging (and fun!) things that I’ve worked on here at Elevate. It provided a unique opportunity to take CSS elements I was already familiar with and use them in new and unexpected ways. It’s also a great example of how much work goes into even seemingly simple elements. As a front-end developer, I need to make sure that everything on a page matches the designer’s vision, works across multiple browsers, loads quickly, and accommodates any special requirements or restrictions that a project may have.

We are a digital agency that believes great design has the power to transform the world of commerce. We exist to help brands stand out and compete in today’s experience-driven, customer-centric economy.