---
title: 'Payment Buttons'
url: 'https://manuals.remository.com/payage/front-end-styles/payment-buttons'
markdown: 'https://manuals.remository.com/payage/front-end-styles/payment-buttons.md'
date: '2026-11-14'
description: 'The Payage gateways offer a choice of payment buttons as images or responsive HTML/CSS buttons. Image Buttons The gateways supply at least three button images, for example: paypal_ft200.png - Framed, Transparent, 200px x 100px paypal_fw200.png - Framed, White background, 200px x 100px paypal_ut200…'
taxonomy:
  category:
    - docs
---

[](#) [ edit this page](https://github.com/getgrav/grav-skeleton-rtfm-site/blob/develop/pages/13.front-end-styles/02.payment-buttons/docs.md) 

# Payment Buttons

The Payage gateways offer a choice of payment buttons as images or responsive HTML/CSS buttons.

## Image Buttons

The gateways supply at least three button images, for example:

- paypal\_ft200.png - Framed, Transparent, 200px x 100px
- paypal\_fw200.png - Framed, White background, 200px x 100px
- paypal\_ut200.png - Unframed, Transparent, 200px x 100px

The images are in this directory, and you can add your own images here:

```
/images/pay_buttons
```

The payage.css provides default hover styling for the image buttons, but you can add your own. The unframed transparent images offer the best possibilities for customisation, since you can add background colours, gradients, and borders. Add your styling to the Custom CSS tab.

## Responsive Buttons

The responsive buttons are also styled by the payage.css file. You can override the default styling by adding rules to the Custom CSS tab. The icons used for the responsive buttons are in this directory:

```
/media/com_payage/icons
```

You can add more icons, but to be recognised by the icon picker, they must be .png files with height less than 45 pixels. The supplied icons are transparent .png files with a height of 36px.

 [ ](https://manuals.remository.com/payage/front-end-styles/how-to-override-the-supplied-styles) [](https://manuals.remository.com/payage/front-end-styles/payment-button-layouts)

---

## Navigation

- Parent: [Front End Styles](https://manuals.remository.com/payage/front-end-styles.md)
- Previous: [How to Override the Supplied Styles](https://manuals.remository.com/payage/front-end-styles/how-to-override-the-supplied-styles.md)
- Next: [Payment Button Layouts](https://manuals.remository.com/payage/front-end-styles/payment-button-layouts.md)