3 Quick & Easy CSS Effects for a Better UI

Susanna Oliver  |  September 12, 2016

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 down load 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! And if you need a hand, just reach out anytime or start a conversation with us @sundogtweets.

Posted in: CSS, UI Design, User Interface, Web Development