How To Add CSS Transition To Button And Optimize Website Design

I’ve been banking with Citibank since college so let me say I’m more than a tad disappointed in their ability to style a button with CSS.

Don’t get me wrong, I’m proud they’re even bothering to update their web user interface. The action says a lot right there 👍

But, intention aside, Citibank’s new dashboard could do with some sprucing.

Their main issue is poor stylistic transitions on various interactive states.

Here, we’ll focus on the hover behavior of their main navigation sidebar buttons that allow users to switch between their Citi accounts.

Currently, the button consists of jerky behavior on mouse hover composed of:

• a minimal right-ward shift of the button element
• a drop shadow effect
• color change in font and background

All three – the right-ward shift, drop shadow, and color changes – remain with the element when selected.

In this post, I’ll show you how a simple CSS transition can turn a clanky old button into a modern UI experience.

See the Pen Citi Button Design Optimization by Klea Merkuri (@thehelpfultipper) on CodePen.

Why does element design matter in web development?

Because clunky UI elements remind me of archaic websites and that makes me distrust their ability to contain and display my personal information.

I don’t personally enjoy interacting with out-of-style components. I enjoy poorly built ones even less.

Knowing how to design a functionally beautiful button in HTML and CSS, for example, does a lot for branding and user experience.

The design of interactive elements like buttons is especially important because of three key aspects:

1. impact on the user experience
2. trickle-down effect on brand authority by way of how experience affects perception
3. role as a constant of interaction

How to make a modern button with CSS

We begin by identifying the three button states: active, inactive, and interactive.

• Inactive: What you see on load of a page when the button is neither selected nor hovered over
• Active: Brings attention using stylistic changes when the button is selected
• Interactive: Hover effects when a user mouses over the button

Let’s bring up a basic HTML structure following the three button states.

<div>
  <h2>Citi Button Design</h2>
  <p class="intro">How a simple CSS animation can turn a clanky old button into a modern UI experience.</p>
  <hr>
    <p>Inactive Button State:</p>
  <button type="button" class="inactive">Citi Summary</button>
    <p>Active Button State:</p>
  <button type="button" class="active">Citi Summary</button>
    <p>Interactive Button State:</p>
  <button type="button" class="interactive">Citi Summary</button>
</div>

Adding styles to the button across different states

My aim is to keep a lot of the existing Citibank branding so we’re going to try stylistically recreating their button.

Since we don’t have access to the background image Citi uses for their button, I opt for background color.

div {
  width: 402px;
  font-family: sans-serif;
  font-size: 1.2rem;
  margin: 0 auto;
  padding-top: 20px; 
  padding-bottom: 40px;
  box-sizing: border-box;
}

.intro {
  font-size: 1.02rem;
}

hr {
  margin-bottom: 40px;
}

.inactive,
.active,
.interactive {
  background: transparent;
  width: 100%;
  height: 80px;
  border: 1px solid lightgrey;
  border-radius: 10px;
  padding: 28px 23px;
  color: #1D659B; 
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .05rem;
  text-align: left;
  margin: 20px;
  transition: background .2s ease, 
    color .3s,
    transform .3s ease-in-out,
    box-shadow .2s ease;
} 

Notice the transition contains two properties we haven’t defined on the buttons yet. Those are transform and box-shadow.

Both properties apply solely on the interactive and active button states but we initiate them on the resting button state.

The transform will be responsible for the right-ward shift of the button while the box-shadow is there because Citibank is overly fond of drop shadow effects 🙄

I find the drop shadow unnecessary since the stylistic changes (e.g. background change and font color change and right-ward shift) are more than enough indication to a user that they’re interacting with an element.

Nevertheless, I’m not going to be a killjoy (I’m usually the life of the party people) so I use an online generator to get a similar, yet softer, shadow color.

Still a little fuzzy on the CSS transition property? See below 👇

How the CSS transition property works

The CSS transition property creates a smooth flow from one style to the next over a period of time.

You define the CSS transition property on the element you want to animate. But there’s no immediate effect on the element itself because the transition property itself initializes changes that are going to happen.

See CSS transition in action: How To Make An Animated Button With CSS

Those changes depend on a state change such as on hover, on click, or some other effect.

As it’s clear from our example above, you’re not restricted to transitioning explicitly defined CSS properties of an element.

For the Citi button, we didn’t set a transform or a box-shadow property. That said, it’s not that they don’t exist. Instead, they’re running on their default states (whatever those may be).

All we’re saying with the transition definition then is to change the listed properties to values defined on state change later on. In the process, apply the defined time-lapse and effect.

Note: Transition vs Animation

I use transition and animation a little loosely throughout this post but be aware they’re different properties.

The “animation” of our Citibank button isn’t complex enough to warrant the use of the CSS animation property.

Our Citi button has a very basic transitional phase that takes it from state A (inactive) to state B (active) during the intermittent action step (interactive).

For an example of CSS animation in action see How To Make A CSS Loading Dot Animation.

When to use transition over animation, or vice versa, comes down to personal choice and project demands.

Tip: Choose CSS transition for simple animations and CSS animation for more complex ones.

Creating the button’s interactive state

The button’s active and interactive states are the same since the interactive state changes remain once the button becomes active.

We’ll use a CSS multi-selector to declare the styles of the two states. Here we define all the properties that are transitioning and/or changing.

Read: Common CSS Selectors To Know And How To Use Them

The ones transitioning will occur based on their predefined time lapses and effects.

.active,
.interactive:hover {
  background: #1D659B;
  color: white;
  cursor: pointer;
  transform: translateX(2%);
  box-shadow: -4px 5px 5px 1px rgba(209, 209, 209, 1);
}

Transitioning is key for generating a modern CSS button design because it gets rid of the abrupt style transition that Citi currently uses.

It’s that abrupt style change that produces clunky behavior when interacting with the UI elements.

But with a single CSS transition, we can make a whole lot of difference in the UI aesthetic!

Make it a goal to become a design-conscious developer

Design and development are married together though typically kept apart to simplify the scope of a role.

I feel you can’t design an interface (like the web or an app) without understanding a little about how things get developed.

Likewise, you can’t develop without some fundamental understanding of design principles.

Tip: To become an in-demand developer you’ll need to first become a design-conscious developer!

That wraps up today. We saw how a single CSS property can make all the difference in the UI experience.

Remember to not abuse nor underuse design principles when developing!

Now if only Citibank would make use of CSS transitions, we’d all be proud banking customers 🤞