Add Animated Buttons to Navbar for Improved User Experience #258 (#275)

<!-- Thank you for sending a pull request ❤️ -->

Add Animated Buttons to Navbar for Improved User Experience #258

Closes: #258


_Please check the boxes that apply_

- [x] Bugfix (non-breaking change that fixes an issue)
- [x] New feature (non-breaking change that adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Documentation update (Documentation content changed)
- [ ] Other (please describe):

## Checklist

_Please check the boxes that apply_

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] My changes do not break the current system and pass all existing
test cases
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged and published in downstream
modules

## Screenshots




https://github.com/user-attachments/assets/d1634dd3-e3ef-4a87-93ee-db31db99fc13

pplicable, please attach screenshots of the changes made to the user
interface.

## Additional Information

Please provide any other information that is relevant to this pull
request.

<!-- We're looking forward to merging your contribution!! -->

index.html

@@ -18,10 +18,32 @@
     </div>
 
     <header>
-           <a href="index.html"><h1>Waste Management</h1></a>
+        <a href="index.html">
+            <h1>Waste Management</h1>
+        </a>
 
         <nav>
-            <ul>
+            <div class="btn-nav">
+
+                <button class="button"> <a href="#upload">Upload</a></button>
+                <button class="button"><a href="#features">Features</a></button>
+
+                <button class="button"><a href="#feedback">Feedback</a></button>
+
+                <button class="button"><a href="#about">About Me</a></button>
+
+                <button class="button"><a href="#register.html">Sign up</a></button>
+
+                <button class="button"><a href="#footer">Contact</a></button>
+
+                <div class="checkbox-con">
+                    <input id="checkbox" type="checkbox">
+                </div>
+
+            </div>
+
+
+            <!-- <ul>
                 <li><a href="#upload">Upload</a></li>
                 <li><a href="#features">Features</a></li>
                 <li><a href="#feedback">Feedback</a></li>
@@ -32,7 +54,7 @@
 
                 <li><a href="#footer">Contact</a></li>
                 <li class="theme-switch" id="theme-switch"></li>
-            </ul>
+            </ul> -->
         </nav>
     </header>
 

styles.css

@@ -1649,11 +1649,139 @@ footer.dark-mode {
 
 .feature-card1 p {
   font-size: 1rem;
-  color: #555;
+  color: #67ed679d;
   line-height: 1.5;
 }
 
 
 .feature-card1:hover .icon {
   color: #28a428;
-}
+}
+
+
+.btn-nav{
+  display: flex;
+  gap: 20px;
+}
+.btn-nav a{
+  color: wheat;
+}
+/* From Uiverse.io by nikk7007 */ 
+.button {
+  --color: #00A97F;
+  padding: 0.8em 1.7em;
+  background-color: transparent;
+  border-radius: .3em;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  transition: .5s;
+  font-weight: 400;
+  font-size: 17px;
+  border: 1px solid;
+  font-family: inherit;
+  text-transform: uppercase;
+  color: var(--color);
+  z-index: 1;
+ }
+
+ .button::before, .button::after {
+  content: '';
+  display: block;
+  width: 50px;
+  height: 50px;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  border-radius: 50%;
+  z-index: -1;
+  background-color: var(--color);
+  transition: 1s ease;
+ }
+
+ .button::before {
+  top: -1em;
+  left: -1em;
+ }
+
+ .button::after {
+  left: calc(100% + 1em);
+  top: calc(100% + 1em);
+ }
+
+ .button:hover::before, .button:hover::after {
+  height: 410px;
+  width: 410px;
+ }
+
+ .button:hover {
+  color: rgb(10, 25, 30);
+ }
+
+ .button:active {
+  filter: brightness(.8);
+ }
+
+.checkbox-con {
+  margin: 10px;
+  display: flex;
+  align-items: center;
+  color: white;
+ }
+
+ .checkbox-con input[type="checkbox"] {
+  appearance: none;
+  width: 48px;
+  height: 27px;
+  border: 2px solid #ff0000;
+  border-radius: 20px;
+  background: #f1e1e1;
+  position: relative;
+  box-sizing: border-box;
+ }
+
+ .checkbox-con input[type="checkbox"]::before {
+  content: "";
+  width: 14px;
+  height: 14px;
+  background: rgba(234, 7, 7, 0.5);
+  border: 2px solid #ea0707;
+  border-radius: 50%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(13%, 15%);
+  transition: all 0.3s ease-in-out;
+ }
+
+ .checkbox-con input[type="checkbox"]::after {
+  content: url("data:image/svg+xml,%3Csvg xmlns='://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 23 23' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.55021 5.84315L17.1568 16.4498L16.4497 17.1569L5.84311 6.55026L6.55021 5.84315Z' fill='%23EA0707' fill-opacity='0.89'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.1567 6.55021L6.55012 17.1568L5.84302 16.4497L16.4496 5.84311L17.1567 6.55021Z' fill='%23EA0707' fill-opacity='0.89'/%3E%3C/svg%3E");
+  position: absolute;
+  top: 0;
+  left: 20px;
+ }
+
+ .checkbox-con input[type="checkbox"]:checked {
+  border: 2px solid #02c202;
+  background: #e2f1e1;
+ }
+
+ .checkbox-con input[type="checkbox"]:checked::before {
+  background: rgba(2, 194, 2, 0.5);
+  border: 2px solid #02c202;
+  transform: translate(133%, 13%);
+  transition: all 0.3s ease-in-out;
+ }
+
+ .checkbox-con input[type="checkbox"]:checked::after {
+  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='13' viewBox='0 0 15 13' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.8185 0.114533C15.0314 0.290403 15.0614 0.605559 14.8855 0.818454L5.00187 12.5L0.113036 6.81663C-0.0618274 6.60291 -0.0303263 6.2879 0.183396 6.11304C0.397119 5.93817 0.71213 5.96967 0.886994 6.18339L5.00187 11L14.1145 0.181573C14.2904 -0.0313222 14.6056 -0.0613371 14.8185 0.114533Z' fill='%2302C202' fill-opacity='0.9'/%3E%3C/svg%3E");
+  position: absolute;
+  top: 5px;
+  left: 5px;
+ }
+
+ .checkbox-con label {
+  margin-left: 10px;
+  cursor: pointer;
+  user-select: none;
+ }
+