Home > Code stuff > Buttons > Progress button styles

Progress button styles

Code

Here are some interesting snippets for creating 3D progress button styles where the button itself serves as a progress indicator. A tutorial by Codrops.

View demo View tutorial

Posted on December 13, 2013 in Buttons, Code stuff and tagged buttons, progress bars. This post has been viewed 3118 times.

Twitter
Facebook
Google
Pinterest

Ready to use Graphic Assets

Related Freebies

A set of examples that use a gooey SVG filter for creating a variety of different effects for all kinds of website components.

March 11, 2015

Creative gooey effects

Code

Flipside is a button that seamlessly transitions from action to confirmation created with few lines of CSS and jQuery.

March 9, 2015September 28, 2015

Flipside – Button to modal

Code

A collection of fresh button styles and effects for your inspiration, built with CSS transitions and pseudo-elements for most of the effects. Coded by Codrops.

February 27, 2015September 28, 2015

Button styles inspiration

Code

A call-to-action button that animates and turns into a full-size modal window with a morphing effect. Created by CodyHouse team.

January 29, 2015September 28, 2015

Morphing modal window

Code

You should try this

Hemma: A WordPress theme for Holiday Houses

Recent Freebies

OAK is a free HTML portfolio template ideal for designers, photographers and any kind of creative people who need a website for showcasing their own works.

July 22, 2017

OAK: A free HTML template for creative portfolios

Exclusive

Code

Brisk Pro is a free sans serif font ideal for headlines and logotypes characterised by geometric shapes and rounded edges.

July 17, 2017

Brisk Pro: Free font

Font

$fractures: An atomic CSS toolkit for building websites$

fractures is a CSS toolkit providing a set of CSS utility classes that may be used for quick prototyping as well as for production.

July 11, 2017

fractures: An atomic CSS toolkit for building websites

Code

Agata Bielen is a fashion magazine template designed by Adrián Somoza. It is a PSD file made of 3 screens based on a Golden Ratio grid.

July 7, 2017

Agata Bielen: Free PSD magazine template

PSD

t-scroll is a reveal-on-scroll JavaScript library for creating custom element animations when scrolling a web page, is built in pure JavaScript and Sass.

July 2, 2017

t-scroll: A modern reveal-on-scroll JS library

Code

Wavehaus Sans is a free font family designed by Graham Paterson. The typeface comes in 6 weights (Thin, Light, Book, Semibold, Bold and Extra Bold).

June 27, 2017June 27, 2017

Wavehaus Sans: A free typeface in 6 weights

Font

Share this

Search Freebie

Envato