This is the button I need to create, but I have no idea how to apply multiple colors and shading effects to it. The colors used in making this button are as follows:
- Lime Green: hsl(136, 65%, 51%)
- Bright Cyan: hsl(192, 70%, 51%)
P.S. Could you also provide guidance on how to add a hover effect to this button?
>Solution :
Try this.
.rounded-button {
width: 150px;
height: 40px;
text-align: center;
line-height: 40px;
font-weight: bold;
color: #fff;
background: linear-gradient(90deg, hsl(136, 65%, 51%), hsl(192, 70%, 51%));
border: none;
border-radius: 50px; /* Adjust the border-radius for the degree of roundness you want */
cursor: pointer;
}
.rounded-button:hover {
background: linear-gradient(90deg, hsl(192, 70%, 51%), hsl(136, 65%, 51%));
}<button class="rounded-button">Request Invite</button>