This guide delves into the creation of a semantically translucent UI button, designed to excel on photographic background images. [View Demo][Download Source] GitHub Repository Photographic backgrounds are currently a popular trend in web design. Accompanying this trend are ghost buttons, exemplified below: [View Example]. These buttons, with their fully transparent backgrounds, are less distracting against photographic images compared to traditional buttons with solid-colored backgrounds. However, ghost buttons face a challenge as they can be too subtle, particularly when set against a photographic backdrop. Due to their minimal visual weight, site visitors might not consider ghost buttons significant. Moreover, they resemble highlighted text, potentially giving off an unclickable impression, which poses significant usability issues. Conversely, ghost buttons are visually appealing on photographic backgrounds due to their transparency. How do we maintain the visual appeal of ghost buttons while ensuring they have a strong call-to-action? A solution can be found on the Tumblr homepage, featuring a semi-transparent login button set against a photographic background: [View Example]. This button represents a harmonious blend between a ghost button and a traditional solid-colored web button. The semi-transparent background allows parts of the underlying photo to show through, creating an attractive visual effect akin to ghost buttons. The conventional button shape provides a clear, recognizable signal that the button is clickable. Crafting semi-transparent buttons is a straightforward process, requiring minimal HTML and CSS. The markup for this button is quite simple, utilizing a single HTML element, in this case, a div element. You can substitute with other elements like span or button. The CSS property responsible for the semi-transparent effect is the rgba property, which is assigned an RGBA color value to control opacity. The background color is white with 50% opacity. Additional considerations include:
Rounded corners are achieved using the border-radius property.
Text-align is used to center the button’s label, a common UI button trait.
Width is set to 200px to prevent the button from becoming excessively wide on larger screens.
A simple animation is triggered upon user interaction with the button, facilitated by the transition property.
For browsers that cannot render rgba color values, such as Internet Explorer 8 and below, a fallback solid background color is declared using hex color notation. To enhance the button’s usability, style rules for the :hover, :active, and :focus pseudo-classes are set, transitioning to a solid-colored background to indicate interactivity. An effective way to increase the visual weight of semi-transparent buttons is to use a more vibrant background color. For instance, a semi-transparent blue button is included in the demo. The code for a semi-transparent blue background is: Another technique to boost visibility is to add a solid-colored border to the button, which can be done simply by applying a border property. That’s the essence of creating a semi-transparent button. I hope this tutorial aids you in some manner. [View Demo][Download Source] GitHub Repository
Design a CSS3 Call to Action Button
Free PSD for Transparent Glass UI: User Interface Design
Creating Responsive Images with CSS
