Si1enzio
KPCKevin Powell - Community
•Created by Si1enzio on 2/25/2024 in #front-end
Transparent Button Background with Gradient Text and Border Effect - Hover Problem
If I comment '.btn-talk' and '.btn-talk:hover' in here - https://codepen.io/Si1enzio/pen/gOEVwNz?editors=1100 - you can see that the link text is working ok. But when you uncomment them - it's gone. The padding area gets transparent, the gradient border is present, but the link text is missing.
19 replies
KPCKevin Powell - Community
•Created by Si1enzio on 2/25/2024 in #front-end
Transparent Button Background with Gradient Text and Border Effect - Hover Problem
but you are not making it gradient. and you probably won't make gradient border without masking.
19 replies
KPCKevin Powell - Community
•Created by Si1enzio on 2/25/2024 in #front-end
Transparent Button Background with Gradient Text and Border Effect - Hover Problem
My guess is that the masking is excluding the content from padding area. And I can't find a solution to this.
19 replies
KPCKevin Powell - Community
•Created by Si1enzio on 2/25/2024 in #front-end
Transparent Button Background with Gradient Text and Border Effect - Hover Problem
It looks ok on solid color for the text and border. The problem occurs when trying to make them gradient.
19 replies
KPCKevin Powell - Community
•Created by Si1enzio on 2/25/2024 in #front-end
Transparent Button Background with Gradient Text and Border Effect - Hover Problem
Gradient background on default, and transparent on hover, but keeping gradient border and text. Just like in the image above.
19 replies
KPCKevin Powell - Community
•Created by Si1enzio on 2/25/2024 in #front-end
Transparent Button Background with Gradient Text and Border Effect - Hover Problem
19 replies
KPCKevin Powell - Community
•Created by Si1enzio on 2/25/2024 in #front-end
Transparent Button Background with Gradient Text and Border Effect - Hover Problem
I had this solution, which is similar to yours - https://codepen.io/Si1enzio/pen/jOJgVbj?editors=1100. But i need to see the background color or background image under the button, when I hover it.
19 replies
KPCKevin Powell - Community
•Created by Si1enzio on 2/25/2024 in #front-end
Transparent Button Background with Gradient Text and Border Effect - Hover Problem
In your pen I see that the button is filled with white color. My idea was that it to be transparent, on hover. So that there is only left the border and the link text (both gradient).
19 replies
KPCKevin Powell - Community
•Created by Si1enzio on 2/25/2024 in #front-end
Transparent Button Background with Gradient Text and Border Effect - Hover Problem
"That is becouse of that color transparent, obviously. Hold my beer..." - You think? I was thinking more that "mask-composite: exclude;" would be the reason.
19 replies