Learn how to style a Razorpay payment button using HTML and CSS. Follow this easy step-by-step guide to design a beautiful payment button for your website.
Table of Contents
A well-designed payment button enhances user experience and makes online transactions smooth. In this guide, we will show you how to style a Razorpay payment button using HTML and CSS to make it attractive and user-friendly.
Prerequisites
Before we start, make sure you have:
- Basic knowledge of HTML and CSS
- A code editor like VS Code or Sublime Text
Source Code
Step 1 (HTML Code):
Create an HTML file and add the following code to set up a basic button structure. Let's break down the html code step by step:
1. HTML Structure
<head> Section:
- Defines the
document type as HTML5 (
<!DOCTYPE html>). - Sets the
language to English (
<html lang="en">). - Specifies
character encoding as UTF-8
for proper text rendering (
<meta charset="UTF-8">). - Enables
responsive design by
setting the viewport meta tag (
<meta name="viewport" content="width=device-width, initial-scale=1.0">). - Sets the
title of the page (
<title>Razor Pay Payment Button - HTML and CSS</title>). - Loads Google Fonts (Poppins font) from an external link.
- Links an
external CSS file (
styles.css) to style the page.
<body> Section:
- Contains a
<div>with the classButtonContainer, which acts as a wrapper for the payment button. - Inside this container, there is a
<button>element with classesPaymentButton-ButtonandPaymentButton-Button--rzpTheme(which are used in thestyles.cssfile to style the button).
2. Button Content
Inside the
-
SVG Icon:
- The
<svg>element defines a Razorpay logo, using<path>elements to draw the shape. - The
fill="#fff"property makes it white.
- The
-
Text Elements:
-
<span class="PaymentButton-text">Pay Now</span>→ Displays the main button text "Pay Now". -
<div class="PoweredBy">Secured by Razorpay</div>→ Displays a security assurance message "Secured by Razorpay".
-
Step 2 (CSS Code):
Create a styles.css file and add the following CSS to design the button. Let's break down the CSS code step by step:
1. Styling the <body>
body {
margin: 0;
background-color: #f0f4f8;
color: #333;
display: flex;
align-items: center;
min-height: 100vh;
}- margin: 0; → Removes default browser margin.
- background-color: #f0f4f8; → Sets a light blue-gray background.
- color: #333; → Sets the default text color to dark gray.
- display: flex; → Enables flexbox for centering content.
- align-items: center; → Centers content vertically.
- min-height: 100vh; → Ensures the page takes at least the full viewport height.
2. Styling the .ButtonContainer
.ButtonContainer {
box-shadow: 0 0 20px rgba(0,0,0,.08);
display: inline-block;
height: 40px;
margin: 28px auto;
}- box-shadow: 0 0 20px rgba(0,0,0,.08); → Adds a subtle shadow.
- display: inline-block; → Allows the button container to wrap around its content.
- height: 40px; → Sets the height of the button.
- margin: 28px auto; → Centers the button horizontally with top margin.
3. Styling the Payment Button
.PaymentButton-Button {
border: 1px solid transparent;
border-radius: 3px;
display: inline-block;
background: #072654;
border-color: #072654;
color: #fff;
font-family: 'Poppins',helvetica,sans-serif;
font-style: italic;
height: 40px;
min-width: 160px;
overflow: hidden;
position: relative;
text-align: center;
}- border: 1px solid transparent; → Adds a transparent border (prevents layout shift when hovering).
- border-radius: 3px; → Slightly rounds the corners.
- display: inline-block; → Ensures proper button rendering.
- background: #072654; → Sets the button background to dark blue.
- border-color: #072654; → Matches border color with the background.
- color: #fff; → Sets text color to white.
- font-family: 'Poppins', helvetica, sans-serif; → Uses the Poppins font.
- font-style: italic; → Makes text italic.
- height: 40px; → Fixes button height.
- min-width: 160px; → Ensures a minimum width.
- overflow: hidden; → Prevents overflowing content.
- position: relative; → Required for absolute-positioned child elements.
- text-align: center; → Centers text inside the button.
4. Adding the Razorpay-Themed Side Strip
.PaymentButton-Button--rzpTheme:before {
background: #1e40a0;
border-radius: 2px 0 0 2px;
content: "";
height: 100%;
left: -6px;
position: absolute;
top: 0;
transform: skew(-15deg,0);
width: 46px;
}- Creates a blue strip on the left side of the button.
- background: #1e40a0; → Uses a slightly lighter blue than the main button.
- border-radius: 2px 0 0 2px; → Rounds only the left corners.
- content: ""; → Creates an empty pseudo-element.
- height: 100%; → Covers the full button height.
- left: -6px; → Moves slightly outside the button.
- position: absolute; top: 0; → Positions it inside the button.
- transform: skew(-15deg,0); → Tilts the shape leftward.
- width: 46px; → Sets its width.
5. Styling the Razorpay SVG Logo
svg {
left: 0;
margin: 9px 11px;
position: absolute;
top: 0;
}- left: 0; → Aligns the SVG logo to the left.
- margin: 9px 11px; → Positions it inside the button.
- position: absolute; → Places it inside the button.
- top: 0; → Aligns it to the top.
Making the SVG White
.PaymentButton-Button--rzpTheme svg path {
fill: #fff;
}- fill: #fff; → Changes the logo color to white.
6. Styling the Button Text
.PaymentButton-contents {
margin: 1px 0;
padding: 4px 10px 4px 44px;
}- Adds padding to position text correctly.
.PaymentButton-text {
display: block;
font-size: 14px;
font-weight: 600;
line-height: 18px;
min-height: 18px;
opacity: .95;
}- display: block; → Ensures text takes full width.
- font-size: 14px; → Sets font size.
- font-weight: 600; → Makes text bold.
- line-height: 18px; → Controls spacing.
- opacity: .95; → Slightly reduces text opacity.
7. Styling the "Secured by Razorpay" Text
.PoweredBy {
font-size: 8px;
line-height: 10px;
opacity: .6;
}- font-size: 8px; → Makes the text small.
- line-height: 10px; → Reduces vertical spacing.
- opacity: .6; → Makes it slightly transparent.
body {
margin: 0;
background-color: #f0f4f8;
display: flex;
align-items: center;
min-height: 100vh;
}
.ButtonContainer {
box-shadow: 0 0 20px rgba(0,0,0,.08);
display: inline-block;
height: 40px;
margin: 28px auto;
}
.PaymentButton-Button {
border: 1px solid transparent;
border-radius: 3px;
display: inline-block;
background: #072654;
border-color: #072654;
color: #fff;
font-family: 'Poppins',helvetica,sans-serif;
font-style: italic;
height: 40px;
min-width: 160px;
overflow: hidden;
position: relative;
text-align: center;
}
.PaymentButton-Button--rzpTheme:before {
background: #1e40a0;
border-radius: 2px 0 0 2px;
content: "";
height: 100%;
left: -6px;
position: absolute;
top: 0;
transform: skew(-15deg,0);
width: 46px;
}
svg {
left: 0;
margin: 9px 11px;
position: absolute;
top: 0;
}
.PaymentButton-Button--rzpTheme svg path {
fill: #fff;
}
.PaymentButton-contents {
margin: 1px 0;
padding: 4px 10px 4px 44px;
}
.PaymentButton-text {
display: block;
font-size: 14px;
font-weight: 600;
line-height: 18px;
min-height: 18px;
opacity: .95;
}
.PoweredBy {
font-size: 8px;
line-height: 10px;
opacity: .6;
} Final Output:
Conclusion:
You have successfully styled a Razorpay payment button using HTML and CSS. Now, your payment button looks professional and user-friendly.
If you found this guide helpful, share it with others who want to style their Razorpay buttons.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
Tags: how to integrate razorpay payment button in html, razorpay payment gateway button design, add razorpay payment option to website, razorpay payment button, html css payment button, razorpay button css
End of the article
