Skip to content

Commit

Permalink
<improved buttons>
Browse files Browse the repository at this point in the history
  • Loading branch information
Sneha Yadav committed Nov 16, 2024
1 parent 1e66441 commit e1b0ed9
Showing 1 changed file with 38 additions and 9 deletions.
47 changes: 38 additions & 9 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -879,15 +879,42 @@ <h1 data-aos="fade-in">Find Your Perfect Getaway<br />Discover the World's Best
agency and we are providing the best travel services for our
clients.
</p>
<div class="action__btns">
<a href="membership.html"><button class="btn" data-aos="fade-in"
style="box-shadow: 2px 2px 8px red;">Membership</button></a>

<a href="plantrip.html"><button class="btn" data-aos="fade-in" style="box-shadow: 2px 2px 8px red;">Plan a
Trip</button></a>
<a href="./payment.html"><button class="btn" data-aos="fade-in" style="box-shadow: 2px 2px 8px red;">Book
Now</button></a>
</div>
<style>
.action__btns {
display: flex;
gap: 15px; /* Space between buttons */
}

.btn {
background-color: #ff4757; /* Button background color */
color: white; /* Button text color */
border: none; /* Remove default border */
border-radius: 5px; /* Rounded corners */
padding: 12px 20px; /* Padding for the button */
font-size: 16px; /* Font size */
cursor: pointer; /* Pointer on hover */
transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; /* Transition for hover effects */
box-shadow: 2px 2px 8px red; /* Initial shadow effect */
}

.btn:hover {
font-size: 18px;
background-color: #ff6b81; /* Darker shade on hover */
transform: scale(1.1); /* Slight lift effect on hover */
box-shadow: 0 10px 20px rgba(255, 0, 0, 0.5); /* Enhanced shadow effect on hover */
}

.btn:active {
transform: translateY(2px); /* Press effect */
box-shadow: 2px 2px 8px red; /* Reset shadow effect on press */
}
</style>

<div class="action__btns">
<a href="membership.html"><button class="btn" data-aos="fade-in">Membership</button></a>
<a href="plantrip.html"><button class="btn" data-aos="fade-in">Plan a Trip</button></a>
<a href="./payment.html"><button class="btn" data-aos="fade-in">Book Now</button></a>
</div>


<br>
Expand All @@ -908,6 +935,8 @@ <h1 data-aos="fade-in">Find Your Perfect Getaway<br />Discover the World's Best
</div>
</section>
</header>



<br>
<!-- Section of About Us -->
Expand Down

0 comments on commit e1b0ed9

Please sign in to comment.