CODEWITHSUNDEEP
htmlcssgradientlinear-gradients
Earpwald
Earpwald

Reputation: 33

Button color CSS transition/gradients

I'm looking to create a styled button for my app. The hope is to use css to generate a button which looks similar to:

Example

The blue comes from the background so it's not relevant, its the shades of green I'm interested in. I'm not sure first if its possible to do it with CSS or how to do it if it is possible.

Can you start a gradient in the top left corner, move into a different colour from there and finish with a final colour at the bottom of the gradient?

If so are there any examples that you know of which I can refer too?

Upvotes: 2

Views: 804

Answers (1)

Steve K
Steve K

Reputation: 4921

You can do this easily enough with a CSS-gradient using color stops. Here's a snippet example:

.gradientButton {
    height: 50px;
    width: 100px;
    line-height:50px;
    vertical-align:middle;
    text-align:center;
    font-family:arial;
    font-size:26px;
    font-weight:bold;
    color:white;
    text-shadow:2px 2px #336633;
    box-shadow:2px 2px #336633;
    border: 1px solid black;
    border-radius:12px;
    background: linear-gradient(to bottom right, LawnGreen 15%, green 85%, DarkGreen 90%);
}

.gradientButton:hover {
    text-shadow:1px 1px #336633;
    box-shadow:1px 1px #336633;
    background: linear-gradient(to bottom right, LawnGreen 5%, green 80%, DarkGreen 85%);
}
<html>
  <body>
    <div class="gradientButton">log in</div>
  </body>
</html>

Using things like gradients and shadows you can even provide hover effects like I've done here making it look like the button's depressed when you hover over it.

Upvotes: 1

Related Questions