Skip to content
Submitted about 3 years ago

Ping comming soon master HTML CSS

PecheMelba•610
@PecheMelba
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Ping single column coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi everyone,

12th challenge from Frontend Mentor. I couln'd find a clean way to have the social button hover in blue. I tried use filter css and fill and event change the svg file to put in blue. ^^" Also if someone has an idea about how to avoid my layout "jumping" when the error message appears I'm in.

Thanks : )

Community feedback

  • Mark Mitchell•1,820
    @markup-mitchellPosted about 3 years ago

    For your social buttons, instead of using <img src="[icon.svg]"> you can inline the SVG - that is, just embed the whole <svg class="icon"></svg> right in your markup.

    Then you can target it with CSS just like any other element and manipulate its properties:

    svg.icon {
    transition: all 0.2s ease;
}
svg.icon:hover {
    fill: blue;
    transition: all 0.3s ease;
}

    demo

    Note that you might need to remove "style" attributes from your SVG to give control to the CSS - inline attributes will override class properties like any HTML element.

    You can do all kinds of fun things with this technique!

    Marked as helpful
    1
    PecheMelba•610
    @PecheMelbaPosted about 3 years ago

    @markup-mitchell Thansk a lot ! I will try it :)

    0

Please log in to post a comment

Log in with GitHub

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