Here’s a short post on how to achieve transition effects with CSS in your Workflow forms. First, a couple of examples:

Another:

Try it in CodePen:
The pertinent CSS for this, converted to :hover instead of clicking the named labels:
.gaButton { width: 80px; height: 25px; text-transform: uppercase; font-family: Verdana, Serif; font-size: 14px; letter-spacing: .5px; border: none; text-align: center; color: white; background-color: #9c3030; outline: none !important; padding-bottom: 2px; cursor: pointer; -webkit-appearance: none; border-radius: 0; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .gaButton:hover { background-color: #4d676f; -moz-transition: all 2s ease; -webkit-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; }
The transition property is the crux of this demo. Don’t limit your testing with this to pseudo-classes like :hover though; you can apply and swap classes with javascript functionally within your forms, which remarkably expands the possibilities for this.