Customizing the store card purchase button appearance

You can customize the visual appearance of the purchase button on store cards, but it is typically built with CSS rather than image assets.

How the button is usually structured

For web and mobile layouts, buttons are generally not assembled from separate fill and border assets. Instead, the preferred approach is to use a solid background color together with layered CSS shadows to create the border, highlight, and depth effects. This makes the button easier to resize responsively.

Example: green glossy 3D-style button

border-radius: 95.44px;
background: #3BB000;
box-shadow:
  0 2.983px 0.994px 0 rgba(251, 255, 2, 0.55) inset,
  0 -0.994px 1.988px 1.988px rgba(219, 142, 0, 0.85) inset,
  0 0 0 5.965px #FFD13A inset,
  0 0 0 7.953px rgba(0, 0, 0, 0.25) inset,
  0 1.988px 4.971px 0 rgba(0, 0, 0, 0.45);

This produces a green button with a glossy highlight and a 3D-looking border effect.

Implementation note

If you want the button to more closely match in-game styling, adjust the background color and inset shadow colors rather than preparing a single static button asset. This approach is more flexible across screen sizes and platforms.

How customization is handled

At the moment, purchase button appearance changes are handled by the Aghanim team upon customer request. There is not currently a self-service option in the web version for customers to test different button colors or styling changes themselves.

If you want the button updated, share the desired look (for example, target colors or reference assets from your game) and the team can implement the changes on your behalf.