CSS only gradient button

October 29th, 2014

The Button

As usual I was working on a project and had to put together a cool little button. The button had a gradient with a hard stop and was angled. See the button in action in the pen below.

See the Pen CSS only gradient button with hover effect by RJ McCollam (@rjmccollam) on CodePen.

The gradient

For the gradient all we are really doing is declaring a linear-gradient with two colors, each of which we stop at 50%. Instead of a top to bottom gradient we angled it -16deg to get it to¬†where we wanted it. Since this is created as a class that can be used throughout the design and it is not a set width the gradient itself doesn’t always match up perfectly in the corners, but it’s certainly good enough.

The underline and hover

To create the underline under the button text we are using the after pseudo selector to insert a line that is 1px tall and 25% of the buttons width. We use some absolute positioning to get it right where we want it, centered and below the text. Make sure that you set the button itself to have a position of relative or else the underline is going to not be where you want it to be.

For the hover we could have done a number of things, but I really liked the idea of simply making the underline wider instead of changing the button color. All we did on hover was change the width of our pseudo element from 25% to 70% and we included a transition to make it look as though it is growing from the center out.

All in all a cool little button that you could tweak to fit in whatever design you are using.