[Resolved] How do I make a responsive button like this?

[Michael]

I am wanting to create a responsive button, but seem to have trouble doing so.

I want one that is similar to the one on this site here where it says ” I Want To Make Money Online!”: https://youronlinerevenue.com/

Is there a way to do this with CSS or some other way?

Thank you

[Leo]

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 🙂

[Michael]

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/

[Leo]

What do you mean it’s all distorted?

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

[Michael]

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

View post on imgur.com

[Leo]

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;
    }
}

[Michael]

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;
}

[Leo]

Just copy and paste under your existing code should work.

Let me know 🙂

[Author]

Posts