Text Resize Button

Design help Animations & Interactions
1

Hi everyone,

My question is: how can I make a smaller/larger text-size buttons using jv or, better, webflow interactions?

Thank you!

1 Like
2

Hello @Elyas

Can you explain more about what youā€™re trying to achieve? Hover effect?

Piter :webflow_heart:

1 Like
3

Hi Piter,

Iā€™m now working on my blog page, and thought that the text size might be small to read for some people.

So I was looking for a way to create this button, but I donā€™t have much of JavaScript knowledge.

See the image below for an example.
image

Thanks!

1 Like
4

Ouuu I see. You want people to have the option to change the text size for the whole site.

1 Like
5

Not exactly, the blog text only. :slight_smile:

1 Like
6

Iā€™ve made something > https://font-size-button.webflow.io/

Keep in mind that Iā€™m not a code master :smile: Just trying some things from the internet. The solution you see here is increasing or decreasing the font size for elements with a class of p-blog-post. You can see that the line height is not changing so this is a problem.

2 Likes
7

If you set the line height to 1.5 (Relative unit) for example instead of fix size (24px) you solve the ā€œline-heightā€ problem.

image

p {
    line-height: 1.5; /* Computed line-height: 24px (1.5 * 16px) */
}
2 Likes
8

Brooo! Thanks for this! You da best :smile: Learned something today :partying_face:

2 Likes
9

Thatā€™s perfect, Piter!

Can I have the read-only link?

1 Like
10

lol i love this as the parameters for your str_replace function: haystack, needle, replacement

clever :slight_smile:

11

Sure! https://webflow.com/website/Font-resize-buttons

1 Like
12

Thanks a lot, man!
Really appreciate the help. :smiling_face_with_three_hearts:

1 Like
13

Please mark @PeterDimitrov main answer as solution (For future searches about this topic). Thanks

1 Like
14

Hi Piter, thanks so much for this solution. I was wondering how I could include this on my own webflow page for accessibility? Iā€™m a bit new to webflow and so far Iā€™ve managed to clone it and copy it, but when I change to ā€˜viewā€™ the button doesnā€™t change anything