How do I make a responsive button like this?

Hi there,

Yup CSS is the way.

Can you try doing this first?
https://docs.generatepress.com/article/adding-buttons/

Then link me to the site so I can tweak the CSS :)

Yep I have added a button as you said within the article, but when I look at it in mobile view it gets all distorted.

How can I fix this?

https://generateonlinerevenue.com/this-is-a-test-post/

What do you mean it's all distorted?

This is what I'm seeing and it's normal:
https://www.screencast.com/t/o90ILeeCyhcZ

I want to have the button to where it stays in one line on mobile view like this:

https://imgur.com/1obJjFw

Try this CSS to make the font size smaller so they fit in a narrow/mobile screen:

@media (max-width: 768px) {
    .button.blue, .button.blue:visited {
        font-size: 10px;
    }
}

Where do I place that in the orginal code like this one here...

.button.sun-flower,
.button.sun-flower:visited {
background: #F1C40F;
color:#FFF;
}

.button.sun-flower:hover,
.button.sun-flower:active {
background: #E2B607;
color:#FFF;
}

Just copy and paste under your existing code should work.

Let me know :)