Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3 Column card

Žydrūnas 150

@ZLikas

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any advice is welcome, the hardest part was changing the button's text to transparent if you know how to do it, let me know.

Community feedback

arey 350

@arey-dev

Posted

Hello! your work is great!!

I think the button's text and the p tag has the same color. But if you want to reduce the opacity of the button's text. You can use hsla() function, it takes four value. The fourth value is the alpha value, it determines the opacity of the color.

Example:

button:hover {
  color: hsla(0, 100%, 100%, 0.5);
}
0

Žydrūnas 150

@ZLikas

Posted

@arey-dev Hi, I've tried this method, the text inside becomes white instead of transparent.

0
arey 350

@arey-dev

Posted

@ZLikas Take a look at this hsla() for more info.

Or an alternative solution is to wrap the text of the button in a tag and set the opacity of a like this, for exmaple:

html
<button>
  <a>Some text</a>
</button>
css
a {
  opacity: 0.6;
}
0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord