Gradient Button Color

Themes
1

Is it possible to add a gradient color to the subscribe buttons on Ghost?

2

Well, it’s possible for sure but how easy it is depends to several factors:

  • Your CSS knowledge
  • Your theme
  • Your enthusiasm to customize Ghost Portals (If you use them)

So, it’s mostly about theme. Generally subscribe buttons use accent color that you sent in Branding section of Ghost admin. To use a custom background, you’ll need to get your hands dirty.

For example, if you use default (Source) theme, you can add a simle CSS code like below with Code Injection section in Ghost Admin:

<style>
  .gh-button {
    background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
  }
</style>

would result something like:

image
image642×164 22.1 KB

But not the floating subscribe button, which is part of Portal and running iframe. You’ll need to override it’s CSS file, which requires a little more effort.

2 Likes
3

Thank you. It worked. I’ve set the bottom corner subscribe button on icon only using a neutral accent colour so it doesn’t matter as much.

Really do appreciate your time to help. :pray:

1 Like