CODEWITHSUNDEEP
csshtmlbuttonstripe-payments
jlo
jlo

Reputation: 2269

How to avoid Stripe's 'Pay with card' button style to get screwed up with HTML5up's css?

I'm using one of html5up.net's templates and when I add a stripe 'Pay by card' button, it's overridden by the css of html5up (see both jsfiddles below). I tried going through the css file and see if there's anything I could change to affect the button's appearance to no avail (the file is absolutely massive and I could use some steering from more experienced heads).

Jsfiddle of how the button is supposed to look like (no css loaded)

<title>Lalala</title>
<body>
<form action="/your-server-side-code" method="POST">
<script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="a public key"
    data-amount="1000"
    data-name="Lalala"
    data-description="Widget"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png" 
    data-locale="auto"
    data-zip-code="true"
    data-currency="eur">
  </script>
</form>

</body>

Jsfiddle of how it looks like with HTML5up's css, which is the same code as before plus this line:

        <link rel="stylesheet" href="main.css" />

My question: Is there any simple way that I can have just the button be exempt from the css that I have loaded for the site? If not, how would you go about accomplishing that? A new class that has default settings in the css file?

Thanks!

Upvotes: 0

Views: 144

Answers (1)

adrian.krzysztofek
adrian.krzysztofek

Reputation: 969

Line 1897 of your CSS is describing styles applied to the buttons.

If you remove line 1923: 

height: 3.75em;

It will look kind of ok (or just delete whole section from 1897 to 2050 and you will be fine).

Upvotes: 1

Related Questions