Transparent Button Background with Gradient Text and Border Effect - Hover Problem
As a beginner in CSS, I've been learning for a few months now, and I recently encountered an issue while practicing gradients. Specifically, I created a button with a gradient background and wanted to add an effect where the background becomes transparent upon hovering, while the button border and text maintain the gradient coloring.
I've made progress and gotten close to the desired result, as you can see in this CodePen: https://codepen.io/Si1enzio/pen/gOEVwNz. However, I'm facing a problem where the link text disappears when hovering over the button.
17 Replies
That is becouse of that color transparent, obviously. Hold my beer...
https://codepen.io/Ghloo/pen/VwRomKy
Also, unless there is another reson, you do not need that span within the <a>.
"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.
It was the
Look at my pen or solution.
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).
Then look at the CSS fow button 2 or 3 at the bottom and change the bgr in every case, the a text needs to have color other than backgrouds. I only added some extras.
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.
Btn with color background on default, transparent on hover?
This is the desired result.
Gradient background on default, and transparent on hover, but keeping gradient border and text. Just like in the image above.
Have a look now.
It looks ok on solid color for the text and border. The problem occurs when trying to make them gradient.
My guess is that the masking is excluding the content from padding area. And I can't find a solution to this.
I am doing with no masking. There is btn4 added in the pen.
but you are not making it gradient. and you probably won't make gradient border without masking.
Yes, I would think of a different way to get the gradient.
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.
I guess the mask makes covers everything inside the <a>. Long since I played with masks. Would use another technique.