Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

DOWNLOAD NOW

Building the Button

The basic structure of our button is quite simple. It’s a single line of HTML:

<button class="btn-ripple">CLICK ME</button>

This is a standard button element with a class btn-ripple attached to it, which will be our reference when we define the ripple effect in CSS.

Casting Ripples With CSS

/* Styling for the ripple button */
.btn-ripple {
  border: none; /* Removing the default button border */
  border-radius: 6px; /* Giving our button rounded corners */
  padding: 12px 16px; /* Providing some padding around the button text */
  font-size: 1.2em; /* Increasing the font size of the button text */
  cursor: pointer; /* Changing the cursor to a hand icon when hovering over the button */
  color: white; /* Making the button text color white */
  background-color: #fa6e83; /* Setting the initial button background color */
  outline: none; /* Removing the outline from the button */
  background-position: center; /* Setting the position of the background image to center */
  transition: background 1s; /* Adding a transition to the background color */
}

/* Defining the hover state */
.btn-ripple:hover {
  background: #f94b71 radial-gradient(circle, transparent 1%, #f94b71 1%)
    center/15000%; /* Creating a radial gradient background on hover */
}

/* Defining the active (clicked) state */
.btn-ripple:active {
  background-color: #f97c85; /* Changing the button color when active */
  background-size: 100%; /* Increasing the size of the background image */
  transition: background 0s; /* Removing the transition from the background color */
}

Let’s break down the CSS setup:

• The .btn-ripple class sets up the basic appearance of the button. The background-color is initially set to #FA6E83, a light color, and the background-position is centered to ensure our ripple effect starts from the middle of the button.
• When you hover over the button, the :hover pseudo-class is activated. It changes the background to a radial gradient that’s centered where the pointer is located, simulating the ripple effect. The gradient starts as transparent (transparent 1%) and transitions to the button color (#F94B71 1%), creating a soft ripple effect.
• Upon clicking the button, the :active pseudo-class takes effect. It changes the background-color to a darker shade (#F97C85) and expands the background-size to 100%, reinforcing the ripple effect. The transition for the background is also set to 0s, making the effect appear instantaneously when the button is clicked.

The Result

See the Pen
Pure CSS Ripple Button Effect by 1stWebDesigner (@firstwebdesigner)
on CodePen.0

Final Thoughts

We demonstrated a classic example of how simple CSS can be used to create appealing interactivity in a user interface. But as you strive to refine your UI, it’s critical to remember that each interface element might require different tweaks.

Consider the context in which your buttons are used. A button for submitting form data might benefit from a more subdued ripple effect, while a call-to-action button could be more prominent with a stronger one.

For more intricate animations or synchronizing with other UI events, JavaScript could be leveraged for more granular control. CSS provides a solid base for styling and basic animations, but JavaScript opens up more advanced possibilities.

And of course, customization is key. While we used specific colors for our ripple button here, feel free to experiment with colors, shapes, and transitions that align with your brand and design aesthetic.

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

DOWNLOAD NOW

Crafting a Loader with Pure CSS

We’ll first structure our spinner using HTML, then we’ll style and animate it using CSS.

HTML Structure for the CSS Loader

<div class="spinner"></div>

Our structure is lightweight, comprising a single div element with a class of “spinner”. This div will serve as the container for our loader.

Now that we’ve set the HTML structure, let’s proceed to craft the spinner using pure CSS.

CSS Styling and Animation for the Loader

/* Defining the Spinner */
.spinner {
  border: 14px solid #e8e8e8; /* Light grey */
  border-top: 14px solid #f65b5f; /* Our color */
  border-radius: 50%; /* Circle */
  width: 80px; 
  height: 80px; 
  animation: spin 1s ease infinite; /* Animation */
}

/* Animation for Spinning Effect */
@keyframes spin {
    to {
        transform: rotate(1turn); /* Full rotation */
    }
}

In the CSS, we define the .spinner class where we design the visual aspects and motion of our loader:

• The border is set to be 14px wide with a light grey color (#e8e8e8). This creates a circle, which becomes our loader’s base.
• The border-top is given a solid, visually appealing color (#f65b5f) to make it stand out against the lighter circle.
• We then make the border circular by setting the border-radius property to 50%.
• The dimensions of the spinner are set with the width and height properties, each set to 80px, giving our spinner a balanced size.
• The animation property defines our animation:
  • The animation’s name is “spin”, which we have defined in the @keyframes rule.
  • The duration is set to 1s, striking a balance between a fast and slow spin.
  • The animation-timing-function is set to ease, giving the animation a more natural feel.
  • The animation-iteration-count is set to infinite, meaning the animation will run indefinitely — perfect for a loader.

Finally, the @keyframes rule spin defines what the animation does — it rotates the spinner one full turn (1turn).

The Result

See the Pen
Spinner Loader with Pure CSS by 1stWebDesigner (@firstwebdesigner)
on CodePen.0

Wrapping Up

Crafting a neat loader isn’t just about aesthetics; it’s a crucial tool that communicates system activity to users. When paired with effective UX writing and controlled with JavaScript, loaders can do more than indicate data-fetching; they can convey various states of processes in complex applications. Accompanying messages can offer insights like the operation type or completion time estimate.

Consider an e-commerce site using a small spinner on a “Buy Now” button to show a transaction is underway, with a note saying “Processing your purchase…”. For tasks with longer wait times, like report generation, a fullscreen loader might be suitable, potentially with a progress bar or comforting message such as “Compiling your custom report…”.

But it’s vital that the loader and its messages fit your design language and meet user expectations. The goal is to reduce wait-time friction and create a smooth, intuitive user experience.

UX Consideration for Ghost Buttons

Ghost buttons are typically bordered by a fine line and contain plain text within. Often used as CTAs, they provide a neat appearance, grabbing attention with high contrast while offering a fresh take on the “flat” look.

Furthermore, they’ve become popular because they’re simple to design, help create focal points without overwhelming the user, and improve aesthetics by maintaining a clean UI. Plus, they easily integrate into any design due to their ability to blend with the environment.

Despite their benefits, ghost buttons must be used wisely. Inappropriate placement can cause them to blend too much with the overall layout, and in worst-case scenarios, they can be mistaken for input fields. It would be best if you were cautious when using them, especially on a background image, as they can fall too far into the background and lead to text legibility issues.

Now that we understand certain UX implications, let’s create one using HTML and CSS.

Setting Up the Structure for Our Ghost Button

The first step to creating a Ghost Button with CSS involves setting up the HTML structure. In this setup, we’re using the <a> element to serve as the base for our Ghost Button. Here’s how it looks:

<a href="https://1stwebdesigner.com/designing-engaging-3d-buttons-css/" class="elegant-ghost-button" target="_blank">Featured</a> 

Styling the Ghost Button with CSS

The next step is to define the appearance of our ghost button. Here’s a look at the CSS code we’ll be using:

body {
  background: #1b1f25;
}

/* Styling our Ghost Button */
.elegant-ghost-button {
    text-align: center;  /* Centers the button text */
    color: #ffffff;  /* Sets text color */
    background: #1b1f25;  /* Matches button background with body background for the 'ghost' effect */
    border: 1px solid #ffffff;  /* Sets a thin white border around the button */
    font-size: 18px;
    padding: 12px 12px;
    display: inline-block;  /* Enables the button to align better with other elements */
    text-decoration: none;  /* Removes the default underline of the anchor text */
    font-family: "Maven Pro", sans-serif;
    min-width: 120px;  /* Ensures a sufficient clickable area */
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;  /* Adds a smooth color transition on hover */
}

/* Changes color and background on hover to provide dynamic feedback */
.elegant-ghost-button:hover, .elegant-ghost-button:active {
  color: #1b1f25;
  background: #ffffff;
}

Initially, the body background color is set to #1b1f25, a dark hue that will contrast effectively with our ghost button.

Then we move to the .elegant-ghost-button class to define our button’s look and behavior:

• text-align: center – This property is used to horizontally align the text within the button, aiding in visual balance.
• color and background – The color property is set to #ffffff, which results in white text. The background is the same color as the body’s background. This helps create the ‘ghost’ effect, where the button appears to blend with the background.
• border: 1px solid #ffffff – This property outlines the button with a thin white border, further defining the ghost button effect.
• font-size and font-family – These properties specify the text’s size (18px) and font (“Maven Pro”, sans-serif) for an easy-to-read and attractive button label.
• padding: 12px 24px – The padding property provides space around the text and also defines the button’s dimensions.
• display: inline-block – This property ensures the button aligns properly with other inline elements.
• text-decoration: none – This property is used to remove the default underline that usually accompanies anchor text.
• transition – This property smoothens the color change over a 0.3 seconds duration when the button is hovered over or clicked. The effect is engaging, as the background color turns white and the text color darkens to #1b1f1f.

In addition to the static properties of the button, the hover effect is crucial to its interactivity. The .elegant-ghost-button:hover, .elegant-ghost-button:active selectors are used to switch the background and text color when the user interacts with the button, providing clear feedback that the button is clickable.

In a more practical scenario, these properties and their values might require adjustments to resonate with your website’s design theme and functional requirements. For instance, you may need to modify the button’s dimensions, colors, font properties, and transition duration to align with your site’s aesthetic. To improve the responsiveness across different devices, you might need to employ media queries to adjust padding and font size according to the viewport size. Lastly, for layouts using flexbox or grid, the management of the button’s size and positioning would need to be considered.

The Result

See the Pen
Ghost Button CSS #1 by 1stWebDesigner (@firstwebdesigner)
on CodePen.0

Final Thoughts

Ghost buttons introduce a minimalist and clean design to web pages, making them particularly useful in contexts where a simplistic, understated aesthetic is desired. However, due to their subtle nature, they may not stand out as prominently as other design elements. As such, using them as the primary CTA on your webpage might not be the most effective strategy.

They often shine when used for secondary or tertiary actions, where their understated elegance can enhance the overall design without drawing unnecessary attention. For instance, they can be used as navigational buttons, form submission buttons, or secondary action prompts that complement a primary, more conspicuous CTA.

Remember, successful design hinges on understanding and applying elements in their effective contexts. Ghost buttons, when used judiciously, can contribute to a visually pleasing and user-friendly interface.

Your Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

DOWNLOAD NOW

Setting the HTML Structure for Our Toggle Button

The first step towards creating a CSS-only toggle button is setting up a suitable HTML structure. We’ll use the following code:

<label class="toggle-switch">
  <input type="checkbox">
  <span class="switch"></span>
</label>

Our structure begins with a <label> element, containing an <input> of type checkbox and a <span>. The checkbox input is what we’ll be toggling. The <span> element, meanwhile, will be visually representing our switch. When the checkbox is clicked, we’ll use CSS to visually “move” the switch within the label.

Styling the Toggle Button with CSS

With our HTML structure established, we turn to CSS to bring our toggle button to life. Here’s the CSS code with comments explaining each section:

/* Defines the switch's outer container */
.toggle-switch {
  display: inline-block;  
  position: relative;     
  width: 60px;            
  height: 34px;           
}

/* Hides the actual checkbox input */
.toggle-switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

/* Styles the switch's slider */
.switch {
  position: absolute;    
  cursor: pointer;       
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;        
  border-radius: 34px;    
}

/* Styles the switch's circle that moves back and forth */
.switch::before {
  position: absolute;
  content: "";            
  height: 26px;           
  width: 26px;
  left: 4px;              
  bottom: 4px;
  background-color: white;
  transition: .4s;        
  border-radius: 50%;    
}

/* Changes the background color and circle position when checked */
input:checked + .switch {
  background-color: #4caf50; 
}

input:checked + .switch::before {
  transform: translateX(26px);
}

In our CSS code, we initially set up a container for our switch using the .toggle-switch rule. This rule sets the dimensions and positioning of the switch.

Next, the .toggle-switch input rule hides the actual checkbox input. While it’s hidden from the visual UI, the input remains functional and can be interacted with programmatically.

The .switch rule then provides styling for the switch’s slider, setting the color, shape, and transition effect.

The .switch::before rule styles the circle within the switch, which moves left and right when the switch is toggled.

Lastly, the input:checked + .switch and input:checked + .switch::before rules control the appearance of the switch when it’s checked, changing the background color of the slider and the position of the circle, respectively.

See the Pen
Button Toggle with CSS only by 1stWebDesigner (@firstwebdesigner)
on CodePen.0

Going Beyond the Basics

The CSS-only toggle button in this tutorial is a simplified model. When complexity escalates with various user interactions and state management, JavaScript may become necessary. If your design demands more detail—icons, labels, or complex transitions—you’ll need a more advanced mix of HTML, CSS, or even SVG and JavaScript. These variations present their own trade-offs in simplicity, flexibility, and browser compatibility, which are critical considerations when designing UI elements.

Venturing beyond this demonstration, the principles we’ve touched upon here will act as your compass. Remember, effective design doesn’t solely hinge on mastering individual technologies, but on understanding how they synergize.

Your Web Designer Toolbox

Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets Starting at only $16.50/month!

DOWNLOAD NOW

The Magic Behind 3D Buttons

What makes a button appear three-dimensional on a two-dimensional screen? The answer lies in the smart use of CSS properties and values. The depth, shadow, and interactive states of 3D buttons are meticulously crafted through CSS, creating a visual illusion of three-dimensionality. Let’s dive in and understand how this approach works.

Creating an Engaging 3D Button: A Step-by-Step Guide

We begin by defining the button structure using HTML:

<button class="btn3D">
  <span class="btnLayer">
    Click
  </span>
</button>

Here, we’ve designed a button with the class btn3D. Inside this button, we’ve placed a <span> element with the class btnLayer that encapsulates the text “Click”.

Now, let’s create the 3D effect with some CSS magic:

/* Style for the 3D button container */
.btn3D {
cursor: pointer; /* change cursor on hover */
padding: 0; /* remove default padding */
border: none; /* remove default button border */
border-radius: 14px; /* round button corners */
background: #AF3549; /* button color */
outline-offset: 3px; /* distance of outline from the button */
}

/* Style for the front layer of the 3D button */
.btnLayer {
display: block; /* make the span behave like a block element */
padding: 10px 40px; /* space around the text */
color: white; /* color of the text */
background: #FF4B59; /* color of the front layer */
font-size: 1.3rem; /* size of the button text */
border-radius: 14px; /* round the corners of the front layer */
transform: translateY(-5px); /* raise the front layer to create a 3D effect */
}

/* Style defining the button state during a click */
.btn3D:active .btnLayer {
transform: translateY(-3px); /* lower the front layer on click */
}

The .btn3D section focuses on initial button styling. We set the background to a rich red (#AF3549) and employ border-radius: 14px; for gentler, rounded edges. The default border is removed and padding is set to zero, ensuring a snug fit between the button border and its interior content. The cursor: pointer; changes the cursor to a hand when hovering, indicating a clickable element, while outline-offset: 3px; provides a small gap between the button and its focus outline, contributing to the 3D perception.

Moving on, the .btnLayer rules are essential for simulating depth. The internal span element is treated as a block (display: block;), letting us adjust margins and padding. Padding is then defined to allocate space around the text, influencing the button’s size.

We assign a vibrant red (#FF4B59) to the background, ensuring it stands out against the button’s base color, while the text color is white for better contrast. Matching the overall button aesthetics, font-size: 1.3rem; and border-radius: 14px; are set. Finally, to simulate depth, transform: translateY(-5px); nudges the span element up by 5 pixels.

Lastly, the .btn3D:active .btnLayer rule deals with the button’s reaction to a click. When activated, the span shifts down 2 pixels (transform: translateY(-3px);), simulating the button being pushed in and reinforcing the 3D experience.

Enhancing Your 3D Buttons

To further customize your 3D buttons, consider adjusting properties such as color, font size, and border-radius. Also, note that while properties like box-shadow and border can add appealing effects, they can negatively impact performance when animated. Therefore, for smooth transitions, focus on transform and opacity properties which are less performance-taxing.

Wrapping Up

Creating 3D buttons is more than an aesthetic venture; it’s about providing an intuitive and engaging interaction for your users. The tactile nature of 3D buttons can increase engagement, guiding users naturally toward taking the desired actions.

But remember, the best designs are those that strike a balance between visual appeal and usability. As exciting as it is to play around with different CSS properties to create eye-catching 3D buttons, don’t lose sight of functionality and accessibility. Always put your design to the test to ensure that it functions as good as it looks.

The HTML and CSS Setup

We start with a straightforward HTML structure: a parent <div> with the class progress-container that houses the overall progress bar, a progress <div> that styles the progress bar’s container and a child <div> with the class <progress-bar> which represents the advancing progress.

<div class="progress-container">
  <div class="progress progress-moving">
    <div class="progress-bar"></div>
  </div>
</div>

In the CSS, we’ll specify the appearance and behavior of these div elements. We’ll also detail the animation, governed by the progress-moving class, that visually communicates the progress.

/* The .progress-container is a wrapper around the progress bar that sets its overall width. */
.progress-container {
  width: 400px;
}

/* The .progress class sets the background, shadow, and border properties of the bar's container. */
.progress {
  padding: 6px; /* Adds space around the progress bar */
  border-radius: 30px; /* Rounds the corners of the bar's container */
  background: rgba(0, 0, 0, 0.25); /* Sets a semi-transparent black background */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); /* Adds inner shadow for 3D effect and slight outer highlight */
}

/* The .progress-bar class defines the appearance and the animation behavior of the actual progress bar. */
.progress-bar {
  height: 18px; /* Sets the height of the progress bar */
  border-radius: 30px; /* Ensures the progress bar has rounded corners */
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); /* Adds a subtle gradient to the progress bar */
  transition: 0.4s linear; /* Smoothens the transition when properties change */
  transition-property: width, background-color; /* Specifies which properties the transition effect applies to */
}

/* The .progress-moving .progress-bar selector applies when the progress bar is moving. */
.progress-moving .progress-bar {
  width: 85%; /* Sets the final width the progress bar should reach */
  background-color: #EF476F; /* Sets the final color the bar should transition to */
  animation: progressAnimation 6s; /* Specifies the animation that will play */
}

/* Defines the start and end states of the progress bar during the animation. */
@keyframes progressAnimation {
  0%   { width: 5%; background-color: #F9BCCA; } /* The progress bar starts at 5% width and a light pink color */
  100% { width: 85%; background-color: #EF476F; } /* It ends at 85% width and a darker pink color */
}

In our setup, the progress bar is housed in a .progress-container, which controls the overall width of the progress bar. The .progress class gives styling to the progress bar’s container, adding padding, a rounded border, a semi-transparent black background, and a subtle shadow effect for depth.

• The .progress-bar class defines the visual characteristics and animation behavior of the progress bar itself. Its height, rounded corners, and background gradient are set, and it uses the transition property to ensure that changes in width and background color occur smoothly over time.
• The .progress-moving .progress-bar selector is used to specify the animation when the progress bar is in motion. This is where the final width and color of the progress bar are set, along with the details of the animation that will play.
• The @keyframes progressAnimation rule specifies the start and end states of the progress bar during the animation. At the start (0%), the progress bar has a width of 5% and a light pink color (#F9BCCA). At the end (100%), the progress bar expands to 85% of its container width and changes to a darker pink color (#EF476F).

Potential Improvements

In addition, here are some areas to consider for augmenting the progress bar:

• Dimensions: Adjusting the progress bar’s dimensions to harmonize with your page’s other elements can help enhance your user interface’s overall aesthetics. Ensuring the progress bar is not disproportionately large or small is crucial for maintaining a balanced display.
• Design Coherence: Aligning the progress bar’s visual elements, such as color and animation, with your website’s overall design can enhance the consistency of your user interface.
• Device Compatibility: Guaranteeing your progress bar’s functional and visual consistency across various devices and screen sizes is vital. This will cater to users regardless of their device preferences.

Final Thoughts

While we discussed the standalone design in this guide, such progress bars are typically paired with JavaScript to reflect real-time changes in data, enhancing user interaction further. The techniques shown here can also serve as a base for creating other interactive components on your site. We’ve only scratched the surface of what’s possible with CSS animations. We encourage you to explore, experiment, and create with your newfound knowledge!

The HTML Structure

Let’s start with the structure. Our journey begins with HTML. This is where we craft the skeleton of our tooltip, using a simple button with an embedded span tag. The button triggers the tooltip, and the span tag houses the tooltip text:

<button>Hover Over Me
    <span>Hey! A retro gaming-style tooltip.</span>
</button>

CSS Styling

Next, we move on to the CSS styling, the core of our tooltip’s appearance and animation. Our CSS styling is broken down into four stages: General Setup, Button Styling, Tooltip Styling, and Tooltip Animation.

General Setup

/* Importing custom font for retro gaming feel */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

body {
  /* Centring the button */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

We import a custom gaming-style font Press Start 2P from Google Fonts for a retro gaming look. Then we style the body to center our button.

Button Styling

button {
  /* Making the button interactive and center aligned */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  /* Styling the button */
  width: 16em;
  height: 3.2em;
  padding: 0 1em;
  border: none;
  border-radius: 3px;
  background-color: #f04e23;
  color: #fff;

  /* Applying custom font */
  font-family: "Press Start 2P", cursive;
  font-size: 1.8vw;

  cursor: pointer;
  outline: none;
  appearance: none;
}

We start by setting the button to flex and aligning the items to the center. The button is given a width and height, padding, and styled with a rounded border. We set the background color to red-orange (#f04e23), the text color to white, and apply the custom font. The cursor is set to pointer to indicate the button is interactive.

Tooltip Styling

span {
  /* Positioning tooltip relative to the button */
  position: absolute;
  left: 50%;
  bottom: 100%;
  opacity: 0; /* Initially hiding the tooltip */
  margin-bottom: 1em;
  padding: 1em;

  /* Styling tooltip */
  background-color: #303030;
  font-size: 0.6em;
  line-height: 1.6;
  text-align: left;
  white-space: nowrap;

  /* Setting initial state for animation */
  transform: translate(-50%, 1em);

  /* Making the changes smooth for animation */
  transition: all 0.15s ease-in-out;
}

span::before {
  /* Creating a triangle at the top of tooltip */
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border: 0.5em solid transparent;
  border-top-color: #303030;
  transform: translate(-50%, 0);
}

The span, which contains the tooltip text, is given an absolute position to enable it to be positioned relative to the button. The tooltip is hidden initially with opacity: 0;. The tooltip color is set to dark gray (#303030) to contrast with the button. The span::before selector is used to create a triangle at the top of the tooltip.

Tooltip Animation

button:hover span {
  /* Making tooltip visible and moving it upwards */
  opacity: 1;
  transform: translate(-50%, 0);
}

When the button is hovered over, the tooltip’s opacity changes to 1, making it visible. The transform property also changes; it shifts the position of the tooltip from its initial state (1em below the button, out of sight) to a new state (aligned with the bottom of the button, but appearing above it because of the absolute positioning). The transition property that we defined in the Tooltip Styling section ensures these changes occur smoothly over time, creating an engaging animation effect.

And that’s it! This should give you a button with a cool retro gaming-themed tooltip.

You can play around with the text, colors, font sizes, and other parameters to customize the look and feel of your tooltips to match your taste and preference.

The Final Result

While this retro gaming-style tooltip is a fun addition, remember that it’s not an industry standard. However, it could prove great for personal websites or projects that allow for a more creative and playful interface. You should also consider the color contrast for visually impaired users and the tooltip’s mobile compatibility.

Understanding Linear and Radial Gradients

To craft visually striking gradient backgrounds, you need to grasp two core types that CSS offers – linear and radial gradients. These form the bedrock for crafting complex and stunning color transitions.

Dawn Inspiration with Linear Gradients

Creating a gradient that mirrors the mesmerizing hues of sunrise is quite straightforward with CSS linear gradients.

body {
    background: linear-gradient(to right, #ff7e5f, #feb47b);
}

In this code snippet, the gradient starts with a warm, pinkish hue (#ff7e5f), slowly transitioning to a brighter, sun-touched tone (#feb47b). The phrase ‘to right’ defines the direction of the gradient flow, leading to a seamless left-to-right color transition.

Sky Aesthetics with Radial Gradients

Radial gradients can be used to emulate the vastness of a clear blue sky. Here’s an example:

body {
    background: radial-gradient(circle, #3e92cc, #070d59);
}

This radial gradient creates a circular pattern that transitions from a bright blue (#3e92cc) at the center to a deep night blue (#070d59) at the edges, resulting in a sky-like visual effect.

Exploring the Rainbow with Linear Gradients

A sound understanding of linear and radial gradients allows for exploration into slightly more complex color transitions. Let’s demonstrate this by creating a CSS linear gradient that transitions through the vibrant spectrum of a rainbow.

body {
  background: linear-gradient(
    90deg,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

The code above generates a vivid rainbow gradient starting with red on the far left, flowing through the colors of the spectrum, and concluding with violet on the far right. The 90deg directive indicates the gradient transition’s direction.

Wrapping Up

While the examples presented only scratch the surface of gradients’ potential, they serve as a springboard for further experimentation. Don’t be afraid to mix colors, shift directions, or change gradient types to discover unique and captivating designs. CSS gradients also allow advanced control over the gradient process by using color stops, and other values like percentages or pixels, to fine-tune the color transition’s position and range. When strategically employed, they can accentuate specific sections of a webpage, such as a call-to-action button or a promotional banner, effectively drawing user attention.

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

DOWNLOAD NOW

The HTML Structure

Before diving into the SCSS magic, let’s start by defining a simple HTML structure for our button.

<div class="buttons">
  <h1>
    Simple hover effects with <code>box-shadow</code>
  </h1>
  <button class="fill"> Fill In</button>
</div>

In this snippet, we have a button element with a class of fill. This class will be used in our SCSS to define the hover effect.

Crafting the Hover Effect with SCSS

Now, let’s delve into the SCSS code and shed light on the key parts of our hover effect. Here, we apply various SCSS rules and CSS custom properties to create an engaging visual effect.

/* Base styling for the button */
button {
  --color: #a972cb; /* Button color */
  --hover: #ef6eae; /* Hover color */
  color: var(--color); /* Applying the color */
  background: none;
  border: 2px solid var(--color); /* Border with the color of the button */
  font: inherit;
  line-height: 1;
  margin: 0.5em;
  padding: 1em 2em;
  transition: 0.25s; /* Transition time */
}

/* Styling for button hover/focus state */
button:hover,
button:focus {
  color: #fff; /* White text on hover */
  border-color: var(--hover); /* Border color change on hover */
  box-shadow: inset 0 0 0 2em var(--hover); /* Inset box-shadow to create a fill effect */
}

The button selector defines the default styles for our button. We use CSS custom properties (--color and --hover) to set the color scheme for our button and its hover state. The transition property allows us to animate changes to these properties, creating a smooth fill effect on hover.

On hover or focus, we update the button’s text color, border-color, and apply an inset box-shadow to mimic the fill effect. This change is animated over 0.25 seconds as specified by the transition property in the button selector.

Rounding Up with Page Styling

For a better visual demonstration, we add some page styling. However, remember that these styles are tailored to this specific example, and in a real-world scenario, they should be adjusted according to suit your needs.

/* Page styling */
body {
  color: #fff;
  background: hsl(227, 10%, 10%);
  font: 300 1em 'Fira Sans', sans-serif;
  justify-content: center;
  align-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  display: flex;
}

/* Heading styling */
h1 {
  font-weight: 400;
}

The body selector styles include the webpage’s font, text alignment, and color scheme. The h1 selector sets the font weight for the title.

Now, when the “Fill in” button is hovered over, we’ll see the effect in action.

Adapting this hover effect to suit your site’s aesthetic is as straightforward as modifying the --color and --hover CSS variables. Don’t forget to consider accessibility principles when choosing your color scheme, as the contrast between the button color and background color is important for readability. Rounded corners, set by the border-radius property, have been increasingly trendy and also contribute to better user experience due to their softer visual impact.

Consider this concise example, where we apply a subtle effect to empty input fields.

Your Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

DOWNLOAD NOW

Constructing the Form

We’ll start by setting up the HTML structure for our form. Each input field includes a placeholder text and is assigned a class called .highlight-empty.

<form>
  <input type="text" placeholder="Enter your name" class="highlight-empty">
  <input type="email" placeholder="Enter your email" class="highlight-empty">
</form>

Applying Styles with CSS

Once we’ve established our form structure, we can move on to styling our input fields where the use of the :placeholder-shown pseudo-class is critical.

input {
  font-size: 0.9rem;
  margin: 10px;
  padding: 5px;
  width: 20%
}

.highlight-empty:placeholder-shown {
  border: 2px solid lightcoral;
  box-shadow: 0 0 5px lightcoral;
}

html, body {
  background: #333;
}

body {
  padding-top: 4em;
}

form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

Understanding the CSS Code

In the CSS code above, we’ve used the :placeholder-shown pseudo-class to apply a light coral border and a subtle glow to the input fields when they are empty and show the placeholder text. As soon as the user starts typing, the effect disappears, indicating that the input has been provided.

.highlight-empty:placeholder-shown {
  border: 2px solid lightcoral; /* Adds a light coral border to empty fields */
  box-shadow: 0 0 5px lightcoral; /* Adds a subtle glow to empty fields */
}

Other CSS properties applied include the styling of input fields (input), the styling of the body (body), and the arrangement of form elements (form). However, you’ll likely work within more complex structures. For instance, you might apply the input styles within specific form components instead of universally. Similarly, the form styles here are rudimentary. They’d usually be adjusted to match your website’s layout and design requirements.

Exploring the Final Result

Check out the GIF below to see the result of this code in action.

To customize further, you can experiment with different border styles, colors, and box-shadow properties. In addition, you can combine :placeholder-shown with other CSS selectors, such as :not, to create effects for different input states.

💡Pro Tip: Note that :placeholder-shown selects the input itself, while ::placeholder styles the text. As a result, the styling of the placeholder text might be affected due to its parent-element relationship.