Responsive Landing Page using Tailwind

Community feedback

• 

  yishak abrham•2,150

  @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 helpful

  0
• 

  Efobi Francis•320

  @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

  ---

  

  yishak abrham•2,150

  @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