# You can make nice buttons in Elements **URL:** \ **Category:** Elements\ **Created:** [June 11, 2025, 3:15am UTC](https://forums.realmacsoftware.com/t/you-can-make-nice-buttons-in-elements/48006 "2025-06-11T03:15:33Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [June 11, 2025, 3:15am UTC](https://forums.realmacsoftware.com/t/you-can-make-nice-buttons-in-elements/48006/1 "2025-06-11T03:15:33Z")
With a little effort, you can make some not-bad-looking buttons in Elements. ![CleanShot 2025-06-10 at 17.11.54@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/8/a/8ad08871302a6fae32edaee447298d549ae7f7b2.png) The only thing missing from making a truly functional button is to have HOVER support for text so that you can change the text color on hover. Never understood why this is not supported in Elements. There are so many cases that can be made for being able to set hover colors for simple text. ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [June 11, 2025, 5:36am UTC](https://forums.realmacsoftware.com/t/you-can-make-nice-buttons-in-elements/48006/2 "2025-06-11T05:36:41Z")
nice in CSS classes you could just enter hover:text-red-500 or whatever there is the links part would be easier if was there for text, it is there in the actual button component did you create the button from scratch, might be misunderstanding your case here ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [June 11, 2025, 6:42am UTC](https://forums.realmacsoftware.com/t/you-can-make-nice-buttons-in-elements/48006/3 "2025-06-11T06:42:33Z")
> [@handshaper](#): > > The only thing missing from making a truly functional button is to have HOVER support for text so that you can change the text color on hover. You can change the Button text colour on hover, see below 🙂 ![CleanShot 2025-06-11 at 08.41.50@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/3/43ad86ae70b7860e33350cb8702c3816147970ce.png) ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [June 11, 2025, 6:47am UTC](https://forums.realmacsoftware.com/t/you-can-make-nice-buttons-in-elements/48006/4 "2025-06-11T06:47:26Z")
Not sure if Robin meant normal text component ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [June 11, 2025, 6:59am UTC](https://forums.realmacsoftware.com/t/you-can-make-nice-buttons-in-elements/48006/5 "2025-06-11T06:59:04Z")
@ben yes, I know I can change the button text, but that is not what I was referring too, I want a hover color for a text component. That is what is being used in this button. There are many other uses for text with a hover color. This button is not a button component. ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [June 11, 2025, 7:03am UTC](https://forums.realmacsoftware.com/t/you-can-make-nice-buttons-in-elements/48006/6 "2025-06-11T07:03:16Z")
Ohhh I see, I thought the screenshot was showing a Button component 😅 Out of curiosity, what made you not be able to use the Button component in this case? Wondering if it’s actually something missing on the Button component 🙂 ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [June 11, 2025, 4:19pm UTC](https://forums.realmacsoftware.com/t/you-can-make-nice-buttons-in-elements/48006/7 "2025-06-11T16:19:40Z")
> [@ben](#): > > Out of curiosity, what made you not be able to use the Button component in this case? Wondering if there’s actually something missing on the Button component 🙂 @ben There was no way to do this with a button component as to achieve this the button needed to be constructed from multiple layers. In this case, there are three flex components. The outer is rendering the border gradient, the inner is rendering the surface gradient, and the final one is managing the text and icon. The gradients then adjust as you roll over the button to create an effect of the button being depressed. I don’t think the button component could handle this style of rendering, other than it could do the surface gradient. I suppose now that I think of it I could have nested a button component within the outer flex to achieve the same effect, which would then have allowed me to handle the text using the button’s properties. I’ll give that a try as a way to get the text color changes. As I had mentioned I have found numerous other cases where it would have been nice to have the ability to set a hover color on the text component, e.g., a title on an accordion. I like to experiment with building up more complex components out of the core ones, but have always found that when it came to text in these components I was limited by the inability to set a hover color. ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [June 11, 2025, 4:54pm UTC](https://forums.realmacsoftware.com/t/you-can-make-nice-buttons-in-elements/48006/8 "2025-06-11T16:54:42Z")
After thinking about this more I realized I might be able to build out the same style button using the button component and a flex. So I changed what I had and now have a button that can change the color of the text. There is a flex with a button nested inside it, took a little massaging of the button to make it look right. NORMAL State: ![CleanShot 2025-06-11 at 06.46.54@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/e/6/e61d665772933821b77eb4d3a51964ae7f8fd60b.png) PRESSED State: ![CleanShot 2025-06-11 at 06.54.10@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/6/5/6543107e4666711eaca8aad49d5b98de00947a8b.png) More experimenting with the gradients needed to get the lighting correct. This solved the need for a hover color on the text, but I still believe there is a valid case to be made for supporting a hover color on a text component. If needed I can provide many more examples of why I think it is valid. ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [June 11, 2025, 5:23pm UTC](https://forums.realmacsoftware.com/t/you-can-make-nice-buttons-in-elements/48006/9 "2025-06-11T17:23:18Z")
cool ---
**Author:** ![thominator](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/thominator/32/35233_2.png) [@thominator](https://forums.realmacsoftware.com/u/thominator)\ **Post date:** [June 11, 2025, 6:46pm UTC](https://forums.realmacsoftware.com/t/you-can-make-nice-buttons-in-elements/48006/10 "2025-06-11T18:46:51Z")
Very nice. Hopefully we’ll see developers build out kits of things like this. ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [June 12, 2025, 8:27am UTC](https://forums.realmacsoftware.com/t/you-can-make-nice-buttons-in-elements/48006/11 "2025-06-12T08:27:45Z")
> [@handshaper](#): > > I still believe there is a valid case to be made for supporting a hover color on a text component I’ve added it to me list of things to investigate 🙂