Design comparison
Solution retrospective
The part i found difficult during the project was when i tried to make the Learn More button. i had to apply three different technique during the process of finding a solution, it was challenging enough, but i'm glad i was able to fix it.
Community feedback
- @yishak621Posted almost 2 years ago
I use
samp
element inside button which will hold the text of btn learn and i add psudo elements in the button to add a color background for the button<button class="btn btn-learn"><samp> learn more</samp></button>
in the css
.btn-learn { padding: 0.2rem 0.5rem; border-radius: 15px; z-index: 1; background-color: transparent; text-transform: uppercase; position: relative !important; overflow: hidden !important; } .btn-learn::after { content: ""; position: absolute; left: 0; top: 0; height: 230%; width: 100%; background-color: hsl(51deg, 100%, 49%); transition: 0.5s; transform: translate(0%, 25%); /*translate x and y*/ opacity: 0.4; z-index: -1; } .btn-learn:hover::after { transform: translate(0%, 20%); opacity: 1; } .btn-learn samp { position: relative; font-weight: 900; font-family: "Fraunces", serif; letter-spacing: 0.05em; font-size: 0.8rem; }
i added a hover effect which makes it cool ...u can checkout my solution to see the output
Marked as helpful0 - @Efobi-FrancisPosted almost 2 years ago
i'll check this out, because i think i'm having some issues with the learn more button, it appears slight differently on different browsers
1@yishak621Posted almost 2 years ago@Efobi-Francis use scss to css compiler it uses --web-kit so that different browsers can understand the code in there own ways....watch youtube videos on how scss works
1
Please log in to post a comment
Log in with GitHubJoin 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