Skip to main content

Customer Experience and Design

3 Quick & Easy CSS Effects for a Better UI

A good user interface (UI) is like a vehicle. You don’t even think about it when it works correctly, but when it doesn’t, it’s a nightmare. CSS effects should make your UI smooth and effortless.

In fact, here are three subtle effects you can do with CSS to improve the UI of your website:

1. Transition Button Hovers

This one line of CSS makes a world of difference in the impression of a UI. It takes the starkness out of a hover state, adding smoothness and polish to the general impression.

.btn {

color: #333;
background: #666;
transition: all .35s ease-out;

}
.btn:hover {

color: #444;
background: #999;

}

2. Shake Error Messages on Forms

Have you ever tried to track down a field you missed in a long form? Even if there’s an error message, it’s easy to miss – that is, unless it moves and catches your eye. It’s easy to add a few lines of CSS to give an error message a short, little shake to help your users identify what they missed.

form .error {

animation: shakeError 75ms 5 ease-in alternate;

}
@keyframes shakeError {

0% {

margin-left: 10px;

}

100% {

margin-left: 0;

}

}

3. Fade In & Slide Up

These two effects combined on an element make a nice entrance. Keep in mind you don’t want to slow download time by lengthy transitions, so use them sparingly on one or two elements you want to highlight above the fold and keep the transition relatively short. In the example below that fades in as it slides up, the margin controls the amount of slide and the opacity controls the fade.

.highlight {

animation: fadeIn .75s ease-out;

}

@keyframes fadeIn {

0% {

opacity: 0;
padding-bottom: 10px;

}

100% {

opacity: 1;
padding-bottom: 0;

}

}

Have fun experimenting with these effects!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Susanna Oliver

Susanna is an email and responsive design expert who always pursues perfection in everything she does. To Susanna, email has unprecedented influence -- it enables businesses to put solutions right into the hands of customers.

More from this Author

Follow Us
TwitterLinkedinFacebookYoutubeInstagram