CSS button with transparent gradient background overlayed photo of library

How to Make a Beautiful Transparent Gradient Button.

Sam Rueby CSS, Web Development 2 Comments

I saw a tweet from Tim Brown and I thought the button with the transparent gradient background was awesome.

You have to go to the website he designed to get the full effect because it’s displayed over a video slider. I wanted to see, without cheating by inspecting the code of the page, how I would build that element in CSS.

First, I wanted to get that gradient right. I always use ColorZilla’s css gradient generator, which generates code that works for practically everything. Here’s the gradient I came-up with: http://www.colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,0+34,0.3+99;Custom. I know, it’s almost impossible to see. Change the color on the far-right to something more contrasty.

I came up with the CSS by looking at Tim’s example and using a bit of trial and error.

I think it turned out pretty good. I used ems after defining the font size in pixels, so it hopefully scales well if the font size were to change. I realized the moving background really adds to the effect. I didn’t want to dive that far into it with this demo, so I wrote some quick code to rapidily change the background.

Full demo was written using JSFIDDLE: http://jsfiddle.net/8rbh92ho/1/

Beautiful photographs used in the demo are copyright their respective owners, found on Flickr: