Custom Styled Buy Now Buttons

The Buy Button ( plain ) snippet pasted into your web page...
You grab this on your Product page under Snippets -> Buy Buttons -> Plain

 
  <!--// CartLoom v4 Snippet for BlueTooth Gramophone //-->
  <script data-cartloom-buy="128271" data-cartloom-type="plain">
   if (typeof Cartloom === "undefined") {
    var Cartloom = {};
    (function(){
     var script = document.createElement("script"); 
     script.src = "https://demo.cartloom.com/cl4/cart.js";
     document.body.appendChild(script);
    })();
   }
  </script>
 

The code embedded into your page by Cartloom ...
This is done automagically and is just mentioned for information purposes only. It shows how we target the button with our CSS code.

<form action="..." method="post" class="cartloom-addtocart buy-button">
  <p>
    <input type="hidden" name="cart" value="add">
    <input type="hidden" name="pid" value="128271">
    <input type="hidden" name="cost" value="299.99">
    <input type="submit" value="Add to Cart">
  </p>   
</form>

The button would look similar to this...
Boring basic default button the browser shows.

Add this CSS code to your web page ... 
How you add this depends on what you are using to design your web site.

.cartloom-addtocart input[type="submit"]
{
  background: #8546F5; 
  color: white; 
  padding: 4px 10px; 
  border-color: transparent;
  border-radius: 4px;
  font-size: 16px; 
  font-family: helvetica; 
}

Now the button looks like this...
Feel free to modify the CSS shown above to get the exact look you are after.