Enhancing buttons with gradients


show more Enhancing buttons with gradients provides you with in-depth training on Developer. Taught by James Williamson as part of the CSS: Styling Navigation show less
please wait ...

Enhancing buttons with gradients

The addition of gradients to CSS was a huge turning point in our ability to stylize elements through CSS. Unfortunately, the syntax is not the easiest thing in the world to master, and uneven browser support means we currently have to use a number of prefixes in older syntax as workarounds in order to get them to work cross-browser. So in this exercise we're going to explore the Gradient syntax and ways that you can make writing them a little bit easier on yourself. I have the buttons file open from 06_03.

Just underneath the box-shadow that we were creating in the last exercise, I'm going to create another background declaration, and yes, I know I have one at top, but I like putting the gradients at the bottom. So gradients are always going to be a part of your background, and I have to specify what type of gradient I want. In this case, I want a linear-gradient. The next thing I have to do is specify the direction that I want the gradient to follow. Now I open up parenthesis at this poin...

Enhancing buttons with gradients
Video duration: 7m 40s 5h 14m Beginner

Viewers:

Enhancing buttons with gradients provides you with in-depth training on Developer. Taught by James Williamson as part of the CSS: Styling Navigation

Subjects:
Developer Web
Software:
CSS
Author:
please wait ...