Brand Your Buttons: How to Style Default Buttons The Simple Way

I recently revamped a client’s sales page.

My accountability partner (and badass breakup coach Cherlyn Chong), recommended I add a button to book a call.

And so I did. It was too good an idea to ignore.

I used my go-to forms app, Paperform, to create the form. I wanted to give them a few options to ask questions as well as book the call. Paperform was flexible enough to let me do this. It’s easy to use, it’s brandable, and the UI is beautifully simple.

Now my only gripe: the Popup option code was using the default button styling from the ‘90s.

Yikes! No bueno.

So a quick Google led me to a few sites. And yet I keep coming back to w3schools.org. As you can probably tell, I’m a woman of habit. If something works well for me, I hardly go elsewhere unless something about it really bugs me or doesn’t bring me joy.

Anyway I found a code I like, tweaked it to fit my client’s brand colours. You want to especially do this using your active colour or button shape.

Here’s the final code:

 <div style="text-align: center; color: #fbc1ac; font-weight: bold; background-color: white;"><button class="button button1" data-paperform-id="ppformidhere" data-popup-button="1">Click here and we'll chat things through.</button></div>

<script>(function() { var script = document.createElement('script'); script.src = "https://paperform.co/__embed";document.body.appendChild(script); })()</script></center>

<style>

.button {
  background-color: #fbc1ac; /* Peach */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #fbc1ac;
}

.button1:hover {
  background-color: #fbc1ac;
  color: white;
}

</style>

I know you might say that I didn’t have to do the extra step, that the default button style would have been fine, but this is just one little extra quick tweak that creates brand consistency.

It was an eyesore like that one dead pixel I had on my Macbook screen that led Apple to give me a brand new Macbook...but that was exceptional circumstances and a story for another day.