With the advent of flat design, designers are having to look for ways to make their designs appealing without losing functionality. An emerging trend is transparent call-to-action buttons, also called ghost buttons or hollow/empty buttons. Somehow these types of buttons are very noticeable even if they blend with the background.
We have collected a selection of website designs that are currently using such buttons for your inspiration. I have added images of the effect of mouseover (where there is an effect) on the transparent buttons.
Transparent Buttons in Web Design
This site’s landing page uses 2 transparent buttons – the first one is clearly outlined in red, with red text ‘Sign up Free’, which changes to red with white text on mouseover, and the second one is white border and text ‘Watch the Video’, that has an opaque background on mouseover. There are 3 call-to-action buttons on this page, all different and all noticable.
This site has 2 transparent buttons, one to play the video and one to scroll down the page. They both have the same design, and the opaque circle border becomes solid white on mouseover.
The animated background helps to make this a beautifully designed landing page. The white text and white bordered transparent call-to-action button stand out on the dark animation.
The transparent call-to-action button on this page turns to solid white with blue text on mouseover.
A monotone site using a fullscreen background slideshow and 2 transparent call-to-action buttons. On mouseover, the borders and text turn to dark gray, and get a bit lost with the images, but by then you have already found them!
Walked & Worn
This fashion website approaches things a little differently from most – they have put outfits on models, then they invite you to ‘shop her look’ – which is a transparent call-to-action button with a pale yellow border. On mouseover, the text becomes black and the button is solid pale yellow.
The Most Northern Place
This website tells the story of the US occupation of the most northern place in the world – Thule in Greenland. Not only is every button on the site transparent, but the vertical scrolling site tells an extremely interesting story from someone who was a child living in Thule at the time.
This site has 2 transparent call-to-action buttons of different colors. The landing page also has some good animations.
Hotel Lago di Garda
This hotel website has a slideshow in the middle, and each slide has a transparent call-to-action button in the same design. The booking form on the right also uses transparent input boxes that don’t change on mouseover.
This is a very interesting concept. Although that looks like a tranparent call-to-action button at the bottom of the page, in fact, the whole page is the call-to-action!
This flat design uses 2 transparent call-to-action buttons: ‘More About Us’ and ‘Hire the Geeks’, that become very dark gray with white text on mouseover.
The Offshore Partners
Another design using a fullscreen background image, which is very dark so the transparent button with a white border and text stands out nicely.
Andy Jones has selected a fairly unusual color scheme for his site, and the 2 transparent call-to-action buttons on the landing page, admittedly have very different background colors, but they are different on mouseover.
We have tried to showcase some varying styles of web design that use transparent buttons, but at the time of writing, there is little variation, so this list was pretty short. If this trend is a hit, I have no doubt that we will see much more variation in the future, and maybe we can visit the subject again.
Have you used transparent call-to-action buttons in any of your designs? Do you plan to use this style of button in the future? Please share your thoughts and links with us in the section below.