[Resolved] Make part of header (link) look like a button

[William]

Hi there,

Is there a way to make the link in the header element (“George Orwell” here) like a button, with hover effect?

Kind regards,

Will

[Leo]

Hi there,

Try something like this:

.page-hero #post_title a {
    border: 1px solid #000;
    padding: 5px;
}

You can see button styles here:
https://docs.generatepress.com/article/adding-buttons/

[William]

That’s great thanks 🙂 I’ve added some CSS to style it a bit more here.

On some posts, such as this one, I don’t have any content for the button and want the button to be non-existent. Is there a way to make the button disappear if there is no content for the button from a shortcode?

[Leo]

Unfortunately CSS cannot tell if there is content or not.

[William]

I’ve done some research and manage to make some CSS that does:

.page-hero #post_title :empty {
	display: none;
}

[Leo]

Awesome!

Thanks for sharing!

[Author]

Posts