The HTML Setup

We’ll begin with our markup, containing the text we’ll be styling – “1stWebDesigner“.

<div class="retro-text"> 1stWebDesigner</div>

The div class .retro-text will be the hook for our CSS styling.

Designing the Retro Style with CSS

Next, let’s move on to our CSS file to create the retro text effect.

@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:wght@700&display=swap');

body {
    background: #6868AC; /* Retro background color */
}

.retro-text {
    font-family: 'Lobster Two', serif; /* Stylish, retro font */
    font-size: 10vw; /* Responsive font size */
    position: relative; /* Enables use of z-index */
    color: #F9f1cc; /* Primary color of the text */
    text-shadow: -2px 2px 0 #FFB650, /* Orange shadow */
                 -4px 4px 0 #FF80BF, /* Pink shadow */
                 -6px 6px 0 #6868AC; /* Dark blue shadow */
    transform: skewX(-10deg); /* Skew the text on the X-axis */
    transition: all 0.5s ease; /* Smooth transition for hover effects */
    z-index: 2; /* Ensures text is layered above any potential background or border */
}

.retro-text:hover {
    color: #FFFFFF; /* Brighter color on hover */
    font-size: 15vw; /* Slightly larger text on hover */
    text-shadow: -2px 2px 0 #FFC162, /* Brighter orange shadow on hover */
                 -4px 4px 0 #FF92D0, /* Brighter pink shadow on hover */
                 -6px 6px 0 #8888D3; /* Brighter blue shadow on hover */
}

To explain our CSS setup:

• font-family: 'Lobster Two', serif;: We’re using Lobster Two, a stylish retro font.
• font-size: 10vw;: Sets a responsive font size that adapts to the viewport width.
• position: relative;: The relative positioning is necessary for the use of the z-index property.
• color: #F9f1cc;: This determines the primary color of the text. Here, we’re using #F9f1cc, a light cream color.
• text-shadow: -2px 2px 0 #FFB650, -4px 4px 0 #FF80BF, -6px 6px 0 #6868AC;: Three layers of text-shadow (orange, pink, and dark blue) are added, creating a 3D effect that enhances the retro feel.
• transform: skewX(-10deg);: The text is skewed on the X-axis to add a dynamic touch.
• transition: all 0.5s ease;: Smooth transition for hover effects.
• z-index: 2;: A z-index of 2 ensures the text is always layered above any potential background or border.
• :hover: The hover state includes a brighter color, slightly larger text size, and brighter shadows.

The Result

Here’s how the above code renders:

See the Pen
Retro CSS Text Effects by 1stWebDesigner (@firstwebdesigner)
on CodePen.0

Final Thoughts

As you can see, CSS provides numerous opportunities to enhance your design. Using our retro text effect as a launching pad, you could experiment with further tweaks like altering text shadows, adjusting opacities or incorporating gradient backgrounds to intensify the retro vibe.

However, it’s crucial to remember the function of your text. The aim is to create a visually engaging site while maintaining readability. This is particularly important when using viewport units like vw for font sizes, which we used in our example. These units allow your text to adjust with the viewport size, ensuring a responsive design.

Yet, care is required. In some contexts, such as headings, vw units could cause your text to appear disproportionately large or small. To prevent this, consider using a mix of viewport and fixed units like em or rem, or setting max/min font sizes with media queries. Always remember: while design is important, it should never compromise the user’s ability to comfortably read and understand your content.

So, whether you’re introducing new elements, tweaking existing ones, or harnessing advanced techniques, every step you take helps you create unique styles that reflect your design aspirations.

Your Web Designer Toolbox

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

DOWNLOAD NOW

Setting up the Structure

Our journey into the deep sea starts with a simple HTML structure: a div element with the class underwater, wrapping around an h1 tag.

<div class="underwater">
	<h1>1stWebDesigner</h1>
</div>

Achieving the Underwater Effect

For our underwater CSS text effect, we introduce a range of CSS properties such as background-image, animation, and -webkit-background-clip.

@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@700&display=swap');

body{
	/* Using a dark background color for optimal contrast */
	background-color: #000;
	font-family: 'Maven Pro', sans-serif;
}

.underwater h1{
	/* Font settings: sizing and a semi-transparent color */
	font-size: 2.5rem;
	color: #2c3e5010;
	
	/* Assigning an underwater image as the background */
	background-image: url('https://w7.pngwing.com/pngs/183/509/png-transparent-under-water-scenery-sunlight-underwater-ray-star-ocean-atmosphere-cloud-computer-wallpaper.png');
	
	/* Clipping the background image to the outline of the text */
	-webkit-background-clip:text;
	
	/* Setting a 10s infinite animation for a dynamic effect */
	animation: waterEffect 10s infinite;
}

/* Animation to simulate flowing water */
@keyframes waterEffect {
	0% { background-position: left 0 top 0; }
	100% { background-position: left 100% top 0; }
}

Explaining Key CSS Properties and Values

Breaking down our CSS code, the first point of interest is the background-image property. By setting an underwater image as the background, we immediately set the tone for our effect.

The -webkit-background-clip:text property clips the background image to the shape of the text. It allows the underwater image to fill the text, setting the stage for our effect.

The color property plays a vital role as well. We’re using a semi-transparent color (color: #2c3e5010;), where the last two digits 10 represent the alpha channel in hexadecimal format, controlling the transparency. This enables the background image to shine through, enhancing the underwater illusion.

The animation property sets our waterEffect animation into motion. Defined by the @keyframes rule, it continuously shifts the background-position from left 0 top 0 to left 100% top 0, creating the illusion of water flowing over the text.

The Result

See the Pen
Underwater Text Effect by 1stWebDesigner (@firstwebdesigner)
on CodePen.0

Exploring Other Methods

Different methods can achieve similar effects. An alternate approach involves utilizing the clip-path property with CSS animations, yielding a wavy text appearance akin to an underwater CSS text effect. This method manipulates the clip region of an element over time, evoking a dynamic sense of movement reminiscent of water’s rhythmic flow. In addition, the technique doesn’t necessitate a background image, instead, it transforms the appearance of the text directly. By turning to this method, you’re exposed to yet another aspect of CSS and its potential for dynamic text effects.

Your Web Designer Toolbox

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

DOWNLOAD NOW

HTML: Building the Neon Button

Our HTML structure for the neon button is quite straightforward:

<button class="neon-button">NEON</button>

We’ve just set up a button with the class “neon-button” which we’ll use to apply our CSS styles.

CSS: Crafting the Neon Glow

Let’s now dive into the CSS code to give our button that neon look:

/* Load custom font from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");

body {
  background-color: #1a1a1a; /* Dark background for neon contrast */
}

/* Styling for our neon button */
.neon-button {
  color: #ff4b59; /* Text color */
  background-color: #1a1a1a; /* Same as the background for a seamless look */
  border: 4px solid #ff4b59; /* Solid border with neon color */
  border-radius: 10px; /* Slight rounding of corners */
  padding: 15px 30px; /* Padding around the text */
  font-size: 25px; /* Visible and impactful text size */
  font-family: "Montserrat", sans-serif; /* Stylish font */
  letter-spacing: 3px; /* Space between letters for better readability */
  cursor: pointer; /* Changes cursor to a pointer on hover */
  font-weight: bold; /* Bold text */
  filter: drop-shadow(0 0 10px #ff4b59) drop-shadow(0 0 30px #ff4b59)
    contrast(1.8) brightness(1.8); /* Adds a subtle glow effect and enhances the vibrancy */
  transition: 0.5s; /* Smooth color change on hover */
}

/* Styling for hover state */
.neon-button:hover {
  color: #1a1a1a; /* Text color changes on hover */
  background-color: #ff4b59; /* Button color fills on hover */
  filter: drop-shadow(0 0 10px #ff4b59) drop-shadow(0 0 40px #ff4b59)
    contrast(1.8) brightness(1.8); /* Glow effect is enhanced on hover */
}

Let’s break down this CSS snippet:

• Color & Background: We use color to set the text color to #FF4B59, our chosen neon shade. The background-color is set to #1A1A1A, which is a dark tone to enhance the neon glow.
• Border & Border Radius: We have border set to 4px and the same color as our text to give our button a neon border. The border-radius property is used to give the button slightly rounded corners.
• Font Size & Family: font-size is set to 25px to ensure our text is large enough to be impactful, and font-family is set to ‘Montserrat’, a stylish sans-serif font, to give our text an appealing look.
• Letter Spacing & Font Weight: We used letter-spacing to provide some space between letters for better readability, and font-weight is set to bold for more emphasis.
• Filter & Transition: The filter property is employed to apply the drop-shadow function twice to create a glowing effect around the text and the border. This glow effect intensifies upon hovering. The transition property ensures a smooth transformation of colors when the button is hovered over.

The Result

See the Pen
Neon Style Button by 1stWebDesigner (@firstwebdesigner)
on CodePen.0

Final Thoughts

This approach provides a straightforward way to create a neon-style button. However, it’s only one of many possible techniques.

In the broader scope of CSS, there are numerous ways to enhance this effect. For instance, using transform property for animated scaling effects, controlling opacity for more depth, using CSS variables for easier management of values, and leveraging pseudo-elements like :before and :after for more complex effects.

If the neon button is meant to serve as a link, it might be more semantically appropriate and beneficial for SEO to use an <a> element instead of a <button>.

Also, to make designs more responsive, consider using relative units like em or rem instead of px, which allows for more fluid scaling across different screen sizes.

Playing around with different box-shadow values can lead to different glow intensities and spread. Combining all these methods can yield an even more impressive and dynamic neon button.

Don’t hesitate to take what you’ve learned here and push it a step further. CSS is full of such opportunities for those willing to explore!

Your Web Designer Toolbox

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

DOWNLOAD NOW

Understanding the Structure of CSS Keyframes

At the core of every CSS animation are keyframes, which define the stages of an animation sequence. Keyframes are declared using the @keyframes rule, followed by an animation name of your choice. The name we use in the example below, changeBackground, is arbitrary – you could name it anything that suits your needs.

Here’s an illustration:

/* Keyframe declaration */
@keyframes changeBackground {
  0%   { background: #ff0000; } /* Red at the start */
  50%  { background: #00ff00; } /* Green in the middle */
  100% { background: #0000ff; } /* Blue at the end */
}

The changeBackground keyframe dictates how the background color of an element will transition during the animation. At the start of the animation (0%), the background is red. At the midway point (50%), the background changes to green. Finally, at the end of the animation (100%), the background transitions to blue.

Applying CSS Keyframes to an Element

Now, let’s apply our keyframes to an HTML element using the animation shorthand property:

/* Applying keyframe to an element */
.myElement {
  animation: changeBackground 2s ease-in-out 1s infinite alternate;
}

In this case, we’ve applied the changeBackground keyframe to an element with the .myElement class. The animation alters the background color of this element over a defined period, according to the stages we set in the keyframe.

Dissecting the Animation Shorthand

The animation shorthand property encapsulates several animation-related properties:

/* The animation shorthand */
animation: changeBackground 2s ease-in-out 1s infinite alternate;

• changeBackground: The keyframe we defined earlier.
• 2s: One cycle of the animation will last 2 seconds.
• ease-in-out: The pace of the animation, starting slow, becoming fast in the middle, and then ending slow.
• 1s: The animation will start after a delay of 1 second.
• infinite: The animation will repeat indefinitely.
• alternate: The animation will alternate directions each cycle.

These are the most commonly used properties but remember that you can also specify animation-fill-mode, animation-play-state, and more. Each property can also be specified separately if you want more control over the animation.

Manipulating Animation Timeline with Percentages and Keywords

Keyframe animations allow changes in style to be dictated using either percentages or the from and to keywords. from represents the start (0%), and to represents the end (100%) of the animation:

/* Keyframe declaration using keywords */
@keyframes fadeInOut {
from { opacity: 0; } /* The element is fully transparent at the start */
to { opacity: 1; } /* The element is fully visible at the end */
}

.myElement {
  animation: fadeInOut 3s ease-in-out 1s infinite alternate;
}

In the fadeInOut keyframe above, we’re changing the element’s opacity. It starts with being fully transparent (opacity: 0) and transitions to being fully visible (opacity: 1). The from and to keywords can be used interchangeably with 0% and 100%, respectively.

So, when this animation is applied to .myElement, the element will gradually fade in over a 3-second duration, from being completely transparent to fully visible. After a 1-second delay, the process will reverse, causing the element to fade out, creating an ongoing cycle of fading in and out due to the infinite and alternate keywords.

Bringing It All Together

Let’s look at a slightly more detailed example:

/* Keyframe declaration */
@keyframes spin {
  0% { transform: rotate(0deg); } /* Element starts at its original position */
  50% { transform: rotate(180deg); } /* Rotates 180 degrees halfway through the animation */
  100% { transform: rotate(360deg); } /* Completes a full rotation at the end */
}

.box {
  width: 100px;
  height: 100px;
  background: #FF4B59; /* Specific shade of red */
  animation: spin 2s linear infinite; /* Applies the spin animation */
}

And here’s our HTML element:

<div class="box"></div>

In the above example, we define an animation named spin that rotates an element. We apply this animation to a <div> element with the class .box. This <div> is a square with a specific shade of red. It will continue to rotate, creating a loop because of the infinite keyword. The transform property with the rotate() function is used to alter the position of the element, providing the rotation effect. The linear keyword ensures that the rotation speed is consistent throughout the animation.

See the Pen CSS Text Embossing Effect by 1stWebDesigner (@firstwebdesigner) on CodePen.0

Conclusion

CSS keyframes form the foundation of most CSS animations. Naturally, there’s more to learn and experiment with beyond the aspects we covered. For instance, consider exploring the steps() function in CSS animations, which allows you to break your animation into segments, giving you “frame by frame” control.

When it comes to interactive animations, JavaScript can be combined with CSS keyframes to trigger animations based on user actions like clicks or scrolls. Meanwhile, SVG animations offer more complex graphical animations beyond standard HTML elements, allowing you to animate individual parts of an SVG image for intricate visual effects.

As your understanding of CSS keyframes deepens, you’ll be able to leverage them more effectively to improve your designs and their user experience. Consider using animations for user guidance, interaction feedback, or simply to elevate your designs.

However, remember that animations can be resource-intensive. Strive for a balance between the aesthetic appeal of animations and your website’s performance. Techniques such as reducing the number of animated properties or minimizing the number of keyframes can help you achieve this balance.

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

DOWNLOAD NOW

HTML Setup

We start with a basic HTML setup – a <div> element with a class of embossed-text:

<div class="embossed-text">
  Embossed
</div>

Creating the CSS Text Embossing Effect

Next, we turn our attention to the CSS, which gives us the desired embossing effect. We’re using the bold and distinctive Truculenta font:

@import url("https://fonts.googleapis.com/css2?family=Truculenta:wght@900&display=swap");

.embossed-text {
 font-family: "Truculenta", sans-serif; /* Set the font to Truculenta */
 font-size: 4em; /* Increase the text size */
 background: #f8bf32; /* Set the warm, summer-like background color */
 color: #2b1e0d; /* Set a rich dark color for the text */
 text-align: center; /* Center align the text */
 padding: 50px; /* Add padding around the text */
 box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); /* Create depth with a box shadow */
 text-shadow: -2px -2px 1px rgba(255, 255, 255, 0.6),
  3px 3px 3px rgba(0, 0, 0, 0.4); /* Create the embossed effect */
}

Let’s break down each CSS property:

• font-family: 'Truculenta', sans-serif; – This sets our text font to Truculenta, a bold and punchy font that is excellent for effects like this.
• font-size: 4em; – This sets the size of our text, making it large enough and noticeable. An embossed effect works well with larger font sizes, and 4em is a suitable size for demonstration.
• background: #F8BF32; and color: #2B1E0D; – These set the background color of our container to a warm summer color, and the text color to a rich dark tone. The contrast between the two colors enhances the embossed effect.
• text-align: center; and padding: 50px; – These center our text and provide padding around it, ensuring the embossed text is well-positioned and well-spaced.
• box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); – This adds a box shadow around our container, enhancing the depth effect.
• text-shadow: -2px -2px 1px rgba(255, 255, 255, 0.6), 3px 3px 3px rgba(0, 0, 0, 0.4); – This property is the main focus, creating the embossed effect. The text-shadow property is defined by two shadows here:
  • A light shadow is positioned at the top left (-2px -2px 1px rgba(255, 255, 255, 0.6)). This acts like a light source, contributing to the illusion of depth.
  • A darker shadow is applied at the bottom right (3px 3px 3px rgba(0, 0, 0, 0.4)). This adds to the effect by mimicking a shadow, further enhancing the embossed look.

Through these simple steps, you’ve created an embossed text effect using CSS.

The Result

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

Final Thoughts

Adding an embossed effect to your text with CSS can introduce a subtle, tactile element to your website. As a designer, it’s one more tool in your toolkit to help differentiate your site. Remember, though, that like all design elements, it should be used thoughtfully and not in excess. It works best when applied to headers or highlighted text, where it can add emphasis without being overbearing.

The beauty of CSS lies in its flexibility and depth. With some experimentation, you can adapt this CSS text embossing effect to suit your design aesthetic. Enjoy exploring the possibilities!

Crafting the Fire Animation Text Effect with CSS

Our first step is setting up the structure. Let’s breathe life into the phrase “Ignite your Design”. Here’s the HTML:

<div class="fire">Ignite your Design</div>

And now we’ll explore the corresponding CSS. We will apply a dark background for contrast, center-align the text, set the font and size, and apply a multi-layered text-shadow to give the text a fiery appearance:

body {
 background-color:#222; /* Setting dark background for visual contrast */
}

.fire {
 color: #f5f5f5; /* Light text color */
 text-align:center; /* Center alignment of text */
 font-family: 'Courier New', Courier, monospace; /* Monospace font */
 font-size: 80px; /* Text size */
 /* Multi-layered text-shadow for fire effect */
 text-shadow:
 0px -1px 3px #fff, /* Innermost layer - intense heat (white) */
 0px -2px 6px #FF3, /* Second layer - core of flame (yellow) */
 0px -6px 12px #F90, /* Middle layer - body of flame (orange) */
 0px -10px 20px #C33; /* Outermost layer - edges of flame (red) */
}

Let’s break this down further:

• background-color:#222; – Sets the entire body’s background to a dark shade for contrast.
• .fire – Targets the class of our element, which allows us to style our text.
• color: #f5f5f5; – Sets the color of our text to a light grey for better visibility against the dark background.
• text-align:center; – We align the text to the center of the page.
• font-family: 'Courier New', Courier, monospace; – We define the font and chose a monospace font for its uniformity and simplicity.
• font-size: 80px; – Sets the text size to be large and noticeable.
• Crucially, the text-shadow property is where the magic happens. It creates multiple layers of shadows in different colors, which we perceive as a flame effect. The colors range from white (the hottest part of a flame) to red (the coolest), simulating a realistic flame gradient.

Bringing the Fire Animation to Life

Next, we’ll animate the text using the @keyframes rule to vary the text-shadow, creating a flickering fire effect:

/* Define the animation named "flicker" */
@keyframes flicker {
    /* Initial state of animation */
    0%, 
    /* Final state of animation */
    100% { 
        text-shadow: 
            0 -1px 3px #fff, /* Innermost layer - intense heat (white) */
            0 -2px 6px #FF3, /* Second layer - core of flame (yellow) */
            0 -6px 12px #F90, /* Middle layer - body of flame (orange) */
            0 -10px 20px #C33; /* Outermost layer - edges of flame (red) */
    }
    /* Middle state of animation */
    50% { 
        text-shadow: 
            0 -2px 6px #fff, /* Innermost layer - intense heat (white) */
            0 -4px 12px #FF3, /* Second layer - core of flame (yellow) */
            0 -8px 16px #F90, /* Middle layer - body of flame (orange) */
            0 -12px 24px #C33; /* Outermost layer - edges of flame (red) */
    }
}

.fire {
    /* Apply the "flicker" animation to the .fire class */
    animation: flicker 2s infinite;
}

Here’s the explanation:

• @keyframes flicker – Here we declare the animation with the name “flicker”. Everything enclosed in the curly braces {} defines the progression of the animation.
• 0%, 100% {...} and 50% {...} – These are the keyframes of the animation. They specify the state of the animation at specific points in time. At the start and end of the animation (0% and 100%), the text-shadow has a smaller blur radius, and in the middle (50%), the blur radius is larger. This variance gives the illusion of a flickering flame.
• .fire { animation: flicker 2s infinite; } – This applies our animation to the .fire class. flicker is the name of the animation, 2s is the duration of one cycle, and infinite means it will repeat indefinitely.

See the Pen
Untitled by 1stWebDesigner (@firstwebdesigner)
on CodePen.0

Fire Animation – More than Just Aesthetic Appeal

We’ve just conjured up a fire animation text effect using simple CSS!

However, our guide isn’t just about crafting a visually pleasing effect. It’s an educational journey into CSS’s dynamic features like text-shadow and @keyframes, showcasing their ability to create captivating visuals. The goal is to illustrate how simple lines of code can birth engaging visual effects.

Keep pushing boundaries and ignite your web design journey!

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.

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.

UNLIMITED DOWNLOADS: 400,000+ Fonts & Design Assets

Starting at only $16.50 per month! DOWNLOAD NOW

HSL Color

HSL stands for Hue, Saturation, and Lightness. This color model is based on the color wheel and allows you to define colors by their hue (color), saturation (intensity), and lightness (brightness). HSL colors are defined in CSS using the following syntax: hsl(hue, saturation, lightness).

Pros:

One of the biggest advantages of using HSL colors is that they are incredibly flexible. With HSL, you can easily adjust the hue, saturation, and lightness of a color to create a wide range of different shades and tones. This makes it easy to create a cohesive color palette for your website.

Another advantage of using HSL is that it is easy to read and understand. The values are intuitive, and the syntax is straightforward, making it easy to write and modify code.

Cons:

One of the main disadvantages of using HSL is that it can be challenging to match colors across different devices and browsers. While HSL is designed to be device-independent, there can be subtle differences in how colors are rendered on different screens.

Another disadvantage of using HSL is that it can be difficult to remember the exact values of specific colors. While this is not a major issue for small projects, it can become a problem when working on larger websites with many different colors.

Example:

body {
  background-color: hsl(240, 100%, 50%);
  color: hsl(0, 0%, 20%);
}

RGBA Color

RGBA stands for Red, Green, Blue, and Alpha. This color model is similar to RGB, but with the addition of an alpha channel that defines the opacity of a color. RGBA colors are defined in CSS using the following syntax: rgba(red, green, blue, alpha).

Pros:

One of the biggest advantages of using RGBA is that it allows you to control the opacity of a color. This can be useful when designing overlays, shadows, and other visual effects that require transparency.

Another advantage of using RGBA is that it is supported by all modern browsers, including Internet Explorer 9 and later.

Cons:

One of the main disadvantages of using RGBA is that it can be more challenging to create a cohesive color palette. Because you are defining each color channel separately, it can be more challenging to create harmonious color combinations.

Another disadvantage of using RGBA is that it can be more difficult to read and understand the code. The values are not as intuitive as HSL, and the syntax can be more complicated.

Example:

body {
  background-color: rgba(255, 0, 0, 0.5);
  color: rgba(0, 0, 255, 0.75);
}

Hex Code Color

Hex code colors are a way of representing colors using hexadecimal notation. This method of color definition is based on the RGB color model and uses a combination of six characters to represent each color channel. Hex code colors are defined in CSS using the following syntax: #RRGGBB.

Pros:

One of the main advantages of using hex code colors is that they are easy to use and remember. Once you are familiar with the syntax, you can quickly and easily define any color you need. Additionally, hex code colors are widely supported by all modern browsers and devices.

Another advantage of using hex code colors is that they can be used to define a wide range of colors, including shades and tones. By manipulating the values of each color channel, you can create a virtually unlimited number of colors.

Cons:

One of the main disadvantages of using hex code colors is that it can be challenging to adjust the saturation and lightness of a color. Because hex code colors are based on the RGB color model, adjusting the saturation and lightness requires complex calculations that can be time-consuming.

Another disadvantage of using hex code colors is that they can be challenging to read and understand, especially for beginners. The values are not intuitive, and it can be difficult to remember the exact values of specific colors.

Example:

body {
  background-color: #ff0000;
  color: #0000ff;
}

When it comes to choosing which color method to use in web design, there is no one-size-fits-all answer. Each method has its pros and cons, and the best choice depends on the specific project’s requirements and the designer’s personal preference. In general, HSL is an excellent choice for designers looking for flexibility and easy-to-read code. RGBA is a good choice for designers looking for control over opacity, while hex code colors are a good choice for designers looking for ease of use and compatibility across all devices and browsers.

Regardless of which method you choose, remember that color is a crucial element in web design. Make sure to carefully consider the color palette you use and how it affects the overall user experience. By using the right color method and carefully selecting your colors, you can create a beautiful and engaging website that your users will love.