1  .button {
 2      display: inline-block;
 3      padding: 10px 20px;
 4      margin: 10px;
 5      border: 2px solid transparent;
 6      /* color: #333; */
 7      text-decoration: none;
 8      font-size: 16px;
 9      cursor: pointer;
10      transition: background-color 0.3s ease, border-color 0.3s ease;
11    }
12    
13    .button[href*="sprout-pool"] {
14      background-color: rgba(128, 0, 128, 0.2); /* Purple with 20% transparency */
15    }
16    
17    .button[href*="sapling-pool"] {
18      background-color: rgba(255, 177, 0, 0.2); /* Yellow with 20% transparency */
19    }
20    
21    .button[href*="orchard-pool"] {
22      background-color: rgba(0, 163, 255, 0.2); /* Blue with 20% transparency */
23    }
24    
25    .button:hover {
26      background-color: rgba(255, 177, 0, 0.5); /* Yellow with 50% transparency */
27    }
28    
29    .button:hover[href*="orchard-pool"] {
30      background-color: rgba(0, 163, 255, 0.5); /* Blue with 50% transparency */
31    }
32    
33    .button:hover[href*="sprout-pool"] {
34      background-color: rgba(128, 0, 128, 0.5); /* Purple with 50% transparency */
35    }
36