Unofficial Nextion/TJC User Forum

Button transparency and corner rounding

Is there a way to make the buttons transparent and rounded corners in the GUI design?

Not without a bit of extra work. First step is to design the button with rounded corners in an external graphics program, export it as a .png file and using it as picture source for the button.
If you use the intelligent “P” series which can handle transparency, you are already done.
If you use one of the cheaper series wich can not handle transparency, you’ll have to do some extra work when deigning the button by filling the corners outside the rounding with the page’s background color, thus faking the transparency.

1 Like

Hey Casperli,
The way I design transparent rounded cornered buttons is by using Figma to design my displays and then I just port out every single element as pictures! Figma also exports shadows and shaders that make certain elements look 3D which you can then assign to your elements like buttons or just plain use as pictures with touch events!

In certain projects when 3D buttons are not required I have had success just exporting the entire page from figma as a png and then using hotspots for touch zones!

There are plenty of tutorials on Figma on youtube and it’s super simple and gives you great tools to work with like grid snap and alignment assistance!

I hope this helps!
Warm Regards,
Manas

1 Like

Thanks for your reply, I will search for Figma and learn how to use it, but I think it would be nice if the GUI software could include transparency and rounded corners.

Thank you for your reply, unfortunately I am not using P series, maybe I have to borrow external image processing software.

This an excellent and non complicated way to create a layout :slight_smile: Thanks!

Hey Casperli,

So there is an option for transparency in the editor but just that I have found Figma to be better at it!
You can still try it out, attaching a photo grab of the params for you to identify and play with,

Hope it leads you ahead,
Warm Regards,
Manas

The alpha channel is only available on intelligent (P) series screens. He already stated that he doesn’t have such a model.

Kind regards,
Max

Thanks for thinking about me, I saw this feature before, unfortunately, I don’t have P series, I will adopt your method to use Figma.


This forum is in no way affiliated with NEXTION®, ITEAD STUDIO®, TJC®, or anyone else really. All product names, logos, and brands are property of their respective owners. All company, product, and service names used in this website are for identification purposes only. Use of these names, logos, and brands does not imply endorsement from the respective rights holder(s).