Get Started

To start using Interlace CSS in your project, you can either download the CSS file and link it in your HTML file, or link the CSS file directly from a CDN:

Installation

              
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vinyashegde/interlace/components/interlace/interlace.css">

or

              
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vinyashegde/interlace/components/interlace/interlace.min.css">


Components

Components Description
buttons different styles of hover buttons like simple, gradient , shadow hover, etc.
cards Different kinds of cards.

More and more components as the time goes.Stay tuned!



Buttons

There are kinds all buttons here just name it!


1. Simple Button

To change the button to square border, you can use the following code in your HTML: 

              
                <button class="simple-button" style="border-radius: 0;">Click me!</button>


2. Simple Hover Button

              
                <button class="simple-hover">Click me!</button>


3. Slide-Up Hover Button

              
                <button class="slide-up-hover">Click me!</button>


4. Grow Hover Button

              
                <button class="grow-hover">Click me!</button>


5. Rotate Hover Button

              
                <button class="rotate-hover">Click me!</button>


6. Outline Hover Button

              
                <button class="outline-hover">Click me!</button>


7. Shadow hover Button

              
                <button class="shadow-hover">Click me!</button>


8. Bg Color Button

                
                  <button class="bg-color-hover">Click me!</button>


9. Underline Hover Button

                  
                    <button class="underline-hover">Click me!</button>


10. Swap Color Button

                  
                    <button class="swap-color-hover">Click me!</button>


Cards

Make interactive cards using Interlace just copy paste it!


1. Simple Card

Card Image
Card Title
Card Description

              
                <div class="simple-card">
                <img class="simple-card-image" src="your image link" alt="Card Image"/>
                <div class="simple-card-title">Card Title</div>
                <div class="simple-card-description">Card Description</div>
                <br />
                <button class="simple-hover">Click me!</button>
              </div>


2. Borderless Card

Card Image
Card Title
Card Description

              
                <div class="borderless-card">
      <img class="borderless-card-image" src="your image link" alt="Card Image"/>
      <div class="borderless-card-title">Card Title</div>
      <div class="borderless-card-description">Card Description</div>
      <br />
      <button class="simple-hover">Click me!</button>
    </div>


3. Gradient Card

Card Image
Card Title
Card Description

              
                <div class="gradient-card">
                <img class="gradient-card-image" src="your image link" alt="Card Image"/>
                <div class="gradient-card-title">Card Title</div>
                <div class="gradient-card-description">Card Description</div>
                <br />
                <button class="simple-hover">Click me!</button>
              </div>


4. Product Card

Product Image
Product Name
$20.99
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel massa euismod, aliquam dolor non, luctus mi. 


              
                <div class="card product-card">
            <img class="product-card-image" src="your image link" alt="Product Image"/>
            <div class="product-card-info">
              <div class="product-card-info-title">Product Name</div>
              <div class="product-card-info-price">$20.99</div>
            </div>
            <div class="product-card-description">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel massa
              euismod, aliquam dolor non, luctus mi.
            </div><br>
            <button class="simple-hover">Add to cart</button>
          </div>


5. Profile Card

Profile Image
Your Name
yourname@example.com
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

              
                <div class="profile-card">
            <img class="profile-card-image" src="your profile image link" alt="Profile Image"/>
            <div class="profile-card-name">Your Name</div>
            <div class="profile-card-email">yourname@example.com</div>
            <div class="profile-card-description">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua.
            </div>
            <button class="shadow-hover">Follow</button>
          </div>