Sunnyside-Agency Responsive Landing Page using Flexbox and CSS Grid

Community feedback

• 

  David•530

  @David404-dev

  Posted over 3 years ago

  You can use the border-bottom property in css for those links and when you hover over those links you can also change the color.

  For example:

  .learn-more-link { border-bottom: 5px solid pink; }

  .learn-more-link:hover { border-bottom: 5px solid orange; }

  If you don't want the colors to change instantly, check out the transition property.

  02

  Marked as helpful
• 

  Raymond Adutwum Agyei•800

  @alosoft

  Posted over 3 years ago

  @Juan2579 You can add the underline by wrapping the link tag with a div container and an empty div below the link

          <div class="container">
            <a href="#" class="styled_button yellow"> Learn more</a>
            <div class="yellow_line"></div>
          </div>
  

  add these styles for the yellow_line and red_line

  .red_line,
  .yellow_line {
      width: calc(100% + 0.5rem);
      height: 0.3rem;
      border-radius: 1rem;
      bottom: 0;
      left: 0;
      right: 0;
      margin-top: -0.4rem;
      background: transparent;
  }
  

  after that you can show the lines on hover with these styles

  .styled_button:hover+.yellow_line {
      background: var(--yellow);
  }
  
  .styled_button:hover+.red_line {
      background: var(--soft-red);
  }
  

  01

  Marked as helpful