Sunnyside-Agency Responsive Landing Page using Flexbox and CSS Grid

Community feedback

• 

  David•530

  @David404-devPosted over 2 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.

  Marked as helpful

  0

  ---

  

  Juan David Gualdron•40

  @Juan2579Posted over 2 years ago

  @David404-dev Thanks!

  0

  

  Raymond Adutwum Agyei•800

  @alosoftPosted over 2 years ago

  @David404-dev the transition is a nice touch. Using the border-bottom property will give the line the same width as the element (text) which is not the case in the design plus the line is even under the text and not below.

  @David404-dev Nice Work!

  1
• 

  Raymond Adutwum Agyei•800

  @alosoftPosted over 2 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);
  }
  

  Marked as helpful

  0

  ---

  

  Juan David Gualdron•40

  @Juan2579Posted over 2 years ago

  @alosoft Thanks!

  0