167 CSS Buttons

Вы здесь:
  1. Главная
  2. Статьи по дизайну
  3. 167 CSS Buttons

About the code

Custom Property Retro Buttons

Playing around with CSS custom properties.

Demo image: Download Button" title="Download Button"/></figure> <div class=

Author

  • Adam Kuhn

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

About the code

Download Button

A playful springy download button with light jQuery and CSS animation.

Demo image: Group Button with SVG Icons" title="Group Button with SVG Icons"/></figure> <div class=

Author

  • Grzegorz Witczak

Made with

  • HTML / CSS (Stylus) / JavaScript

About the code

Group Button with SVG Icons

Group button with svg iconsbased on dribble project: https://dribbble.com/shots/694671-Buttons-Free-PSD

Demo image: Add Button" title="Add Button"/></figure> <div class=

Author

  • Mert Nerukuc

About the code

Add Button

Inspired by Eddie Lobanovskiy's Plus expanded on Dribbble https://dribbble.com/shots/3208361-Plus-expanded.

Demo image: Download Button" title="Download Button"/></figure> <div class=

Author

  • Andreas Storm

Made with

  • HTML / CSS (Sass) / JavaScript

About the code

Download Button

Jelly download button with little jQuery.

Demo image: Animated CSS Mail Button" title="Animated CSS Mail Button"/></figure> <div class=

Author

  • Jake Giles-Phillips

About the code

Animated CSS Mail Button

Material Design flat UI CSS mail button. Pure CSS animation.

Demo image: Floating Animation" title="Floating Animation"/></figure> <div class=

Author

  • Chouaib Blgn

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Floating Animation

Cool floating button animation using HTML and CSS and jQuery.

Demo image: SVG Button Hover Effect With Snap.svg" title="SVG Button Hover Effect With Snap.svg"/></figure> <div class=

Author

  • Joost Kiens

Made with

  • HTML
  • CSS/PostCSS
  • JavaScript/Babel (snap.svg.js)

About the code

SVG Button Hover Effect With Snap.svg

Simple button hover effect by replacing the text in a button with an svg element which mimics the button in order to create an effect which can not (easily?) be done with CSS.

Demo Image: Button Animation With CSS Offset Paths" title="Button Animation With CSS Offset Paths"/> <figcaption>Demo Image: Button Animation With CSS Offset Paths</figcaption></figure> </p> <h3><span id=Button Animation With CSS Offset Paths

A button with animating fly out dots that move along an offset path (formerly known as CSS motion paths).
Made by Nick Salloum
June 12, 2017

Demo Image: Animated Rainbow Button" title="Animated Rainbow Button"/> <figcaption>Demo Image: Animated Rainbow Button</figcaption></figure> </p> <h3><span id=Animated Rainbow Button

HTML and CSS animated rainbow button.
Made by lemmin
June 10, 2017

Demo Image: Play Button" title="Play Button"/> <figcaption>Demo GIF: Play Button</figcaption></figure> </p> <h3><span id=Play Button

Play button transition with HTML and CSS.
Made by Baron
April 2, 2017

Demo Image: Stripe Button" title="Stripe Button"/> <figcaption>Demo GIF: Stripe Button</figcaption></figure> </p> <h3><span id=Stripe Button

HTML and CSS stripe button.
Made by Felipe Bernardes
May 22, 2017

Demo Image: Fancy Button Menu" title="Fancy Button Menu"/> <figcaption>Demo Image: Fancy Button Menu</figcaption></figure> </p> <h3><span id=Fancy Button Menu

Simple animated button with double border in pseudo element.
Made by Nodws
November 14, 2016

Demo Image: CSS Buttons" title="CSS Buttons"/> <figcaption>Demo Image: CSS Buttons</figcaption></figure> </p> <h3><span id=CSS Buttons

Inspiration for new ways to make interactive buttons using linear-gradients, box-shadows, and pseudo classes!
Made by Derek Morash
August 19, 2016

Demo Image: Ghost Button Animation" title="Ghost Button Animation"/> <figcaption>Demo Image: Ghost Button Animation</figcaption></figure> </p> <h3><span id=Ghost Button Animation

Ghost button animation with HTML and CSS(SCSS).
Made by Valentine
June 23, 2016

Demo Image: Button Animation Experiment" title="Button Animation Experiment"/> <figcaption>Demo Image: Button Animation Experiment</figcaption></figure> </p> <h3><span id=Button Animation Experiment

Another quick pen of button animation based on a Dribbble post.
Made by Valentine
June 23, 2016

Demo Image: Social Buttons with Icon Fonts" title="Social Buttons with Icon Fonts"/> <figcaption>Demo Image: Social Buttons With Icon Fonts</figcaption></figure> </p> <h3><span id=Social Buttons With Icon Fonts

Another set of social buttons for anyone to use/take inspiration from. This set takes advantage of Font Awesome icon pack.
Made by David Pottrell
June 6, 2016

Demo Image: Contact Button" title="Contact Button"/> <figcaption>Demo Image: Contact Button</figcaption></figure> </p> <h3><span id=Contact Button

Contact button from dribbble shot. Only for fun.
Made by Alberto Jerez
March 18, 2016

Demo Image: Pure CSS Menu Close Icon" title="Pure CSS Menu Close Icon"/> <figcaption>Demo Image: Pure CSS Menu Close Icon</figcaption></figure> </p> <h3><span id=Pure CSS Menu Close Icon

Pure CSS(Sass) menu icon.
Made by Dominic Kolbe
October 16, 2015

Demo Image: Colorful CSS Buttons" title="Colorful CSS Buttons"/> <figcaption>Demo Image: Colorful CSS Buttons</figcaption></figure> </p> <h3><span id=Colorful CSS Buttons

A collection of various types of CSS buttons in various colors.
Made by Chris Deacy
September 20, 2015

Demo Image: OK Button" title="OK Button"/> <figcaption>Demo Image: OK Button</figcaption></figure> </p> <h3><span id=OK Button

Hover effect — animation icons.
Made by Marco Barría
September 12, 2015

Demo Image: Button Hover Animations" title="Button Hover Animations"/> <figcaption>Demo Image: Button Hover Animations</figcaption></figure> </p> <h3><span id=Button Hover Animations

A set of button hover animations.
Made by Akshay Nair
August 23, 2015

Demo Image: Blobs Button" title="Blobs Button"/> <figcaption>Demo Image: Blobs Button</figcaption></figure> </p> <h3><span id=Blobs Button

Button hover effect from https://isl.co/.
Made by Nikolay Talanov
August 22, 2015

Demo Image: Simple Button Hover" title="Simple Button Hover"/> <figcaption>Demo Image: Simple Button Hover</figcaption></figure> </p> <h3><span id=Simple Button Hover

Simple multi layer box shadow hover effect.
Made by Dominic Magnifico
August 21, 2015

Demo Image: Amy Winehouse Doc Button" title="Amy Winehouse Doc Button"/> <figcaption>Demo Image: Amy Winehouse Doc Button</figcaption></figure> </p> <h3><span id=Amy Winehouse Doc Button

Amy Winehouse doc button with HTML and CSS(SCSS).
Made by Eric Grucza
August 17, 2015

Demo Image: YouTube Play Pause Button" title="YouTube Play Pause Button"/> <figcaption>Demo Image: YouTube Play Pause Button</figcaption></figure> </p> <h3><span id=YouTube Play Pause Button

Play/Pause button with SVGs only.
Made by David Darnes
August 4, 2015

Demo Image: Half Fuller Buttons" title="Half Fuller Buttons"/> <figcaption>Demo Image: Half Fuller Buttons</figcaption></figure> </p> <h3><span id=Half Fuller Buttons

Half fuller buttons with HTML(Pug) and CSS(SCSS).
Made by David Fuller
July 30, 2015

Demo Image: Collection Of Button Hover Effects" title="Collection Of Button Hover Effects"/> <figcaption>Demo Image: Collection Of Button Hover Effects</figcaption></figure> </p> <h3><span id=Collection of Button Hover Effects

A few examples of flashy hover effects.
Made by David Conner
July 10, 2015

Demo Image: Button Hover States" title="Button Hover States"/> <figcaption>Demo Image: Button Hover States</figcaption></figure> </p> <h3><span id=Button Hover States

Snazzy CSS hover states for a button.

Made by James Power
May 15, 2015

Demo Image: Animated CSS3 Buttons" title="Animated CSS3 Buttons"/> <figcaption>Demo Image: Animated CSS3 Buttons</figcaption></figure> </p> <h3><span id=Animated CSS3 Buttons

Experimental css buttons by Designify.me.
Made by Sazzad
April 25, 2015

Demo Image: Button Outline Animation On Hover" title="Button Outline Animation On Hover"/> <figcaption>Demo Image: Button Outline Animation On Hover</figcaption></figure> </p> <h3><span id=Button Outline Animation On Hover

Button outline animation on hover with HTML(Haml) and CSS(SCSS).
Made by Eric Grucza
February 9, 2015

Demo Image: Box/Button Hovers" title="Box/Button Hovers"/> <figcaption>Demo Image: Box/Button Hovers</figcaption></figure> </p> <h3><span id=Box/Button Hovers

HTML/CSS box and button hovers.
Made by andrew wierzba
February 4, 2015

HTML and CSS like button examples (6 items).

Demo Image: The Twitter Like Button" title="The Twitter Like Button"/> <figcaption>Demo GIF: The Twitter Like Button</figcaption></figure> </p> <h3><span id=The Twitter Like Button

The Twitter like button made only using SVG and CSS3 animations.
Made by Robeen
January 2, 2017

Demo Image: Like Animation — Jumpy Hearts" title="Like Animation — Jumpy Hearts"/> <figcaption>Demo Image: Like Animation — Jumpy Hearts</figcaption></figure> </p> <h3><span id=Like Animation — Jumpy Hearts

Like animation with HTML(Haml), CSS(SCSS) and JavaScript.
Made by Wojtek Witkowski
November 17, 2016

Demo Image: Interactive Splat Like Button" title="Interactive Splat Like Button"/> <figcaption>Demo GIF: Interactive Splat Like Button</figcaption></figure> </p> <h3><span id=Interactive Splat Like Button

Interactive splat like button in HTML, CSS and JavaScript.
Made by Gowri Prasanth V M
November 1, 2016

Demo Image: Like And Favorite Buttons" title="Like And Favorite Buttons"/> <figcaption>Demo Image: Like And Favorite Buttons</figcaption></figure> </p> <h3><span id=Like And Favorite Buttons

Like and favorite buttons with HTML, CSS and JavaScript.
Made by Ahmad Yousef
October 18, 2016

Demo Image: CSS Favourite Button" title="CSS Favourite Button"/> <figcaption>Demo Image: CSS Favourite Button</figcaption></figure> </p> <h3><span id=CSS Favourite Button

Just another experiment for a favourite button this time. Some nice animations etc. All in CSS, no imagery or svg’s etc.
Made by Jamie Coulter
March 18, 2015

Demo Image: Hover Intent - Like button" title="Hover Intent - Like button"/> <figcaption>Demo Image: Hover Intent — Like button</figcaption></figure> </p> <h3><span id=Hover Intent — Like button

Like button with HTML, CSS(SCSS) and JavaScript.
Made by Sam Lillicrap
January 28, 2014

Category: Статьи по дизайну
Теги: 

Пожалуйста, поставьте рейтинг статье:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Связанные записи

Go to Top

Поделитесь статьей!

close-link