Home
Posts

How to Align Button at the Bottom of Card Using CSS | Tips&Tricks



        Hello guys. Welcome to my notes. If you want to see the steps making this tutorial, you can directly watch the video below.  and If you want the code from the tutorial, just scroll down.


HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Card button</title>
    </head>
    <body>
        <section class="card_container">
            <div class="card">
                <div class="img_container">
                    <img src="src/bg.png" alt="" class="img" />
                </div>
                <div class="card_content">
                    <p class="card_text">
                        Lorem ipsum, dolor sit amet consectetur adipisicing
                        elit. Architecto distinctio laudantium eveniet error ad
                        quasi quia?
                    </p>
                    <a href="#" class="card_btn">More</a>
                </div>
            </div>
            <div class="card">
                <div class="img_container">
                    <img src="src/bg.png" alt="" class="img" />
                </div>
                <div class="card_content">
                    <p class="card_text">
                        Lorem ipsum dolor sit, amet consectetur adipisicing
                        elit. Voluptas quae saepe voluptate autem atque,
                        blanditiis deleniti aliquid fugiat! Excepturi autem
                        pariatur perferendis similique animi. Similique quos
                        ipsam illum atque quasi iure eveniet.
                    </p>
                    <a href="#" class="card_btn">More</a>
                </div>
            </div>
            <div class="card">
                <div class="img_container">
                    <img src="src/bg.png" alt="" class="img" />
                </div>
                <div class="card_content">
                    <p class="card_text">
                        lorem24Lorem ipsum, dolor sit amet consectetur
                        adipisicing elit. Vel ratione voluptate quidem, nam
                        dolorum aspernatur unde placeat sunt architecto ipsa
                        harum!
                    </p>
                    <a href="#" class="card_btn">More</a>
                </div>
            </div>
        </section>
    </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

.card_container{
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 96px 48px;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.card{
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 360px;
  padding: 12px;
}

.img_container{
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 24px;
}

.img{
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.card_content{
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: start;
  flex: 1;
}

.card_text{
  color: #666;
  font-size: 16px;
  font-weight: 500;
  flex: 1;
}

.card_btn{
  border-radius: 6px;
  background-color: #a151cb;
  padding: 6px 32px;
  text-decoration: none;
  color: white;
  font-weight: 500;
}

@media screen and (max-width:1000px){
  .card_container{
    flex-wrap: wrap;
    gap: 18px;
    padding: 96px 24px;
  }

  .card{
    max-width: 360px;
  }
}

@media screen and (max-width:800px){
  .card_container{
    flex-direction: column;
  }

  .card{
    max-width: none;
  }
}
or you can get full code in by clicking button bellow :

Download Code

Buy Me A Coffee

Thank You for coming to my notes, if you wanna see another tutorial , you can check to my notes or you can subscribe to my Youtube channel , where I post new tips&tricks and tutorials about HTML, CSS and Javascript. See You !!!

Post a Comment