skip to Main Content

I am new to CSS so I am sure this is a simple answer, but I am having trouble aligning the buttons in the bottom of my box. I want them all to have the same distance from the bottom of the box but I am unsure how to do so. Anything will help!

Sub Buttons

/*Sub Buttons CSS*/

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

.wrapper{
  max-width: 1090px;
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.wrapper .table{
  background: #ffffff;
  width: calc(25% - 20px);
  padding: 25px 20px;
  position: relative;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
  
}

.table .price-section{
  display: flex;
  justify-content: center;
}

.table .price-area{
  height: 120px;
  width: 120px;
  border-radius: 50%;
  padding: 2px;
}
.price-area .inner-area{
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border: 3px solid #fff;
  line-height: 117px;
  text-align: center;
  color: #fff;
  position: relative;
}
.price-area .inner-area .text{
  font-size: 25px;
  font-weight: 400;
  position: absolute;
  top: -10px;
  left: 17px;
}
.price-area .inner-area .price{
  font-size: 45px;
  font-weight: 500;
  margin-left: 16px;
}

.table .package-name{
  width: 100%;
  height: 2px;
  margin: 35px 0;
  position: relative;
}
.table .package-name::before{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 25px;
  font-weight: 500;
  background: #fff;
  padding: 0 15px;
  transform: translate(-50%, -50%);
}

.features
{
  flex-direction: column;
  text-align: center;

}

.table .features li{
  margin-bottom: 15px;
  list-style: none;
  display: flex;
  
  flex-direction: column;
  width: fit-content;

  justify-content: space-between;
}

.features li .list-name{
  font-size: 17px;
  font-weight: 200;
}
.features li .icon{
  font-size: 15px;
}
.features li .icon.check{
  color: #2db94d;
}
.features li .icon.cross{
  color: #cd3241;
}

/*testing buttons*/

.table .btn{
  width: 100%;
  display: flex;
  margin-top: 35px;
  justify-content: center;
  position: relative;
  margin-top: auto;
}

.table .btn button{
  width: 80%;
  height: 50px;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  border: none;
  outline: none;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/*end of button testing*/

.table .btn button:hover{
  border-radius: 5px;
}
.basic .features li::selection{
  background: #CD7F32;
}
.basic ::selection,
.basic .price-area,
.basic .inner-area{
  background: #CD7F32;
}
.basic .btn button{
  border: 2px solid #CD7F32;
  background: #fff;
  color: #CD7F32;
}
.basic .btn button:hover{
  background: #CD7F32;
  color: #fff;
}
.silver ::selection,
.silver .price-area,
.silver .inner-area,
.silver .btn button{
  background: #C0C0C0;
}
.silver .btn button:hover{
  background: #9c9c9c;
}

.gold ::selection,
.gold .price-area,
.gold .inner-area{
  background: #FFD700;
}
.gold .btn button{
  border: 2px solid #FFD700;
  color: #FFD700;
  background: #fff;
}
.gold .btn button:hover{
  background: #FFD700;
  color: #fff;
}


.diamond ::selection,
.diamond .price-area,
.diamond .inner-area{
  background: #b9f2ff;
}
.diamond .btn button{
  border: 2px solid #b9f2ff;
  color: #b9f2ff;
  background: #fff;
}
.diamond .btn button:hover{
  background: #b9f2ff;
  color: #fff;
}
.basic .package-name{
  background: #CD7F32;
}
.silver .package-name{
  background: #868686;
}
.gold .package-name{
  background: #FFD700;
}
.diamond .package-name{
  background: #baf8d4;
}
.basic .package-name::before{
  content: "Free";
}
.silver .package-name::before{
  content: "Silver";
  font-size: 24px;
}

.gold .package-name::before{
  content: "Gold";
  font-size: 24px;
}

.diamond .package-name::before{
  content: "Diamond";
  font-size: 24px;
}
@media (max-width: 1020px) {
  .wrapper .table{
    width: calc(50% - 20px);
    margin-bottom: 40px;
  }
}
@media (max-width: 698px) {
  .wrapper .table{
    width: 100%;
  }
}
::selection{
  color: #ffffff;
}

.table .ribbon{
  width: 150px;
  height: 150px;
  position: absolute;
  top: -10px;
  left: -10px;
  overflow: hidden;
}
.table .ribbon::before,
.table .ribbon::after{
  position: absolute;
  content: "";
  z-index: -1;
  display: block;
  border: 7px solid #C0C0C0;
  border-top-color: transparent;
  border-left-color: transparent;
}
.table .ribbon::before{
  top: 0px;
  right: 15px;
}
.table .ribbon::after{
  bottom: 15px;
  left: 0px;
}
.table .ribbon span{
  position: absolute;
  top: 30px;
  right: 0;
  transform: rotate(-45deg);
  width: 200px;
  background: #C0C0C0;
  padding: 10px 0;
  color: #fff;
  text-align: center;
  font-size: 17px;
  text-transform: uppercase;
  box-shadow: 0 5px 10px rgba(0,0,0,0.12);
}

I have tried positioning and aligning to get the boxes to align towards the bottom, but I am having no luck. Been working on this for a while and hit a wall.

2

Answers


  1. According to me, if you wanted your "Subscribe" btn at the center and from the same distance from the bottom then, place the above code like "all the above text and img " in a seperate div and give fixed height, so that all the content above your btn is aligned as same as all others and button is at it’s correct position and same height from the bottom to all.

    <div style="height = 120px">
            #place your code here
    </div>
    <button>
         Subscribe
    </button>

    HAPPY CODING!!!

    Login or Signup to reply.
  2. We need all button is absolute positioned and set them with same distance from bottom.

    .btn {
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translate(-50%, 0);
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search