【前端动效】一大波css按钮动效袭来(之二)

上次给大家分享了《【前端动效】一大波css按钮动效袭来》
今天带来67个按钮动效,附GIF效果和codepen链接,bingo~总有一款适合你!

Button Animation


HTML + CSS (SCSS)
http://codepen.io/alexpate/pen/YyLOWQ/

Expanding Share Button


HTML + CSS (LESS) + JavaScript (jQuery)
Delicious transitions going on here :-)
http://codepen.io/tamashi/pen/ojyoWr

Button Disabled And Loading States


HTML + CSS (SCSS)
http://codepen.io/brandonkennedy/pen/RWGyoE

Submit Button Animation


HTML + CSS
Fly little plane, flay!
http://codepen.io/theotix/pen/cAxIv

Social Button Animation


HTML + CSS
Inspired by http://drbl.in/qbcK, I gave him life with html and css.
http://codepen.io/theotix/pen/pjbyZY/

Ajax Load Button Animation


HTML + CSS (SCSS) + JavaScript (jQuery)
Click button, shows css animation, get html via ajax. Pretty basic, something a haven’t really had an opportunity to do much, so I figured I’d try making a mock one.
http://codepen.io/ianchouinard/pen/Xmdwav

3D Buttons


HTML + CSS (SASS) + JavaScript (jQuery)
http://codepen.io/praktikdan/pen/jbqBWm

Neat Button


HTML + CSS (SCSS)
This is some fancy styling for a single-element button.  Hover over it!
http://codepen.io/ScottKaye/pen/pjgGVM/

OK Button


HTML (Jade) + CSS (SCSS)
Hover effect – animation icons.
http://codepen.io/fixcl/pen/pjjBGG

Button Effects


HTML + CSS (LESS)
http://codepen.io/nicmitch/pen/ojgxYP

Button Outline Animation


HTML + CSS (SASS)
Just a little animation for a button style.
http://codepen.io/codeProKid/pen/bdXqKp

Command Key


HTML + CSS (SCSS)
A command key written with HTML and CSS. Inspired Macintosh keyboards.
http://codepen.io/karlerikjonatan/pen/EHgAb

CSS Button


HTML + CSS (SCSS)
Just another button.
http://codepen.io/ajv/pen/ojjpNv

Download Progress Interaction


HTML + CSS (SCSS) + JavaScript (jQuery) + SVG
Inspiration : https://dribbble.com/shots/1859666-Downloading-progress-CSS
http://codepen.io/balapa/pen/EVxeZg

Contact Button


HTML + CSS (SCSS)
Contact button from dribbble shot. Only for fun.Inspiration: https://dribbble.com/shots/2131627-Personal-Portfolio-Site/attachments/388736
http://codepen.io/ajerez/pen/XmbQXQ

Button Hover Style (+video)

image
HTML + CSS (SCSS)
http://codepen.io/btemperli/pen/LppbWz

Rounded Button With Cool Hover Effect


HTML + CSS (SCSS)
Based on http://tympanus.net/Development/CreativeButtons/ but upgraded to support not transparent background color.
http://codepen.io/Osvalds/pen/yYNGxW

Nifty Button Hover


HTML + CSS (SCSS)
Little hover effect with pseudo elements and borders.
http://codepen.io/magnificode/pen/WQvgda

CSS3 Hover Effects On Buttons


HTML + CSS
http://codepen.io/sorinv/pen/qOdXYq

Cool Hover Button (video)


HTML + CSS
Inspired By Alexandre Pitton.
http://codepen.io/Kiddo/pen/PPoyBP

Simple Button


HTML + CSS
Playing with transitions.
http://codepen.io/porksausages/pen/XbLdMw

Colour Swipe Hover Effect For Buttons

image
HTML + CSS (SCSS)
This is just a basic hover effect which swipes between 2 background colours using pseudo elements and css transitions.
http://codepen.io/jazibobs/pen/BNgVPY

Simple Button Hover


HTML + CSS (SCSS)
Simple multi layer box shadow hover effect.
http://codepen.io/magnificode/pen/zGVyQm

Blobs Button

Blobs CSS Button
HTML + CSS (SCSS)
Originally I found this button on this site – https://isl.co/ and recreated it. Their version is broken in FF (already contacted them), because svg filter is imported as external file (I’m like 90% sure). This is a problem with FF, if svg, which containes filter, don’t actually on the page (or have display: none) whole element with this filter will be invisible.IE don’t support css filters at all, so it have bigger blobs, and other browsers have smaller blobs with help of @supports rule (turns out this thing can be really useful!).
http://codepen.io/suez/pen/aOgMxy

Button Spinner Test

Button Spinner Test
HTML + CSS
Just a CSS spinning button to test out the concept.
http://codepen.io/Nicolas-Roberts/pen/MwMNOv

Button Hover Animations

A set of button hover animations
HTML + CSS (SCSS)
A set of button hover animations.
http://codepen.io/phenax/pen/vOoOWK

Sullivan Buttons


HTML + CSS (LESS)
Sample buttons from my Sullivan template for BaseKit. Checkout the dribbble shot.You’ll soon be able to try out this template, along with others, by signing up for free at developers.basekit.com
http://codepen.io/daviddarnes/pen/VLXxMa

Material Menu Concept


HTML + CSS (SCSS) + JavaScript (jQuery)
Inspired from https://dribbble.com/shots/1960058-Menu-Animation-Ferris-Wheel?list=searches
http://codepen.io/vivek3003/pen/bdmZVY

Hover Animated Buttons


HTML + CSS
http://codepen.io/ahung02590/pen/EjzvjR

Faux 3D Hover Effects with CSS


HTML + CSS (SCSS)
Purely CSS Faux Hover effect for some buttons.
http://codepen.io/akrigline/pen/PqvxEL

Collection of Button Hover Effects


HTML + CSS (SCSS)
A few examples of flashy hover effects.Work in Progress.
http://codepen.io/davidicus/pen/emgQKJ

Direction-aware Button Hover Animation


HTML + CSS (SCSS) + JavaScript (jQuery)
Direction-aware hover effect, mouseenter and mouseleave events. Trying to replicate the effect seen here: http://www.stand4humanrights.com/
http://codepen.io/rickzanutta/pen/vOwXPK

Menu Button


HTML + CSS (SASS)
http://codepen.io/kamrade/pen/mJgZpo

Amy Winehouse Doc Button

image
HTML + CSS (SCSS)
I’ve been wanting to make this button for a long time, and finally got around to it. Inspired by this site http://www.amy-movie.com/ here is my take on the main button style.
http://codepen.io/egrucza/pen/NqVrzq

Button Hover Effects


HTML + CSS (SCSS)
Animating the span letters of the buttons for neat text effects.
http://codepen.io/MuseMetrics/pen/pJBVxO

Sketchy Button


HTML + CSS (SCSS) + JavaScript
Randomly generated rough edges using SVG filters.
http://codepen.io/ScottPolhemus/pen/RPOxww

Simple Example 2-3D Transforms For Social-links


HTML + CSS (SCSS)
Short example for transitions on  buttons.
http://codepen.io/Ingemarlbs/pen/yNraBp

8-bit Hovers


HTML + CSS (SCSS) + JavaScript (jQuery)
8-bit inspired hover effects.
http://codepen.io/tstoik/pen/EjMzRZ/

Simple Flat Buttons


HTML + CSS (SCSS)
http://codepen.io/maziarzamani/pen/YXgvjv

Rotating Icon Buttons

HTML + CSS
I saw an effect similar to this somewhere, so I just wanted to play around with the idea! Hover over the buttons to see the colors invert, the icon rotate, and the border grow from within the button.

http://codepen.io/colewaldrip/pen/bdZVGd

CSS Arrow Buttons


HTML + CSS (SCSS)
Sass mixin for creating arrow buttons. Uses transform: skew on pseudo-elements.
http://codepen.io/giana/pen/VLRmgG

Buttons Hover Effect


HTML + CSS
http://codepen.io/alidz/pen/KpEWRr

Social Share Button


HTML + CSS
Social share button inspire with https://dribbble.com/shots/1034808-Widget?list=users&offset=2
http://codepen.io/arjunamgain/pen/waXwrx

Codepen Button Hover


HTML + CSS (LESS)
A subtle button hover effect using CSS. Not very scalable, purely for experimentation.
http://codepen.io/pmarich/pen/GgRyvb

Button With Sliding Information


HTML + CSS (SCSS)
The button shows you more information when you hover it.
http://codepen.io/miroot/pen/hmeHn

Fancy 3D Button


HTML + CSS (SCSS)
Proof of concept for a 3d button.
http://codepen.io/Maximilianos/pen/xHCwo

Squared Button


HTML + CSS
http://codepen.io/Sejul/pen/CuhDF

Button With Slide Hover Transition


HTML + CSS (SCSS)
Button transition with new content and new background color sliding in on hover. Background from http://www.pexels.com as usual.
http://codepen.io/egrucza/pen/gtvyo

Share Buttons


HTML + CSS (Stylus) + JavaScript (CoffeeScript)
http://codepen.io/andreasstorm/pen/neCBu

Twitter Button


HTML + CSS
Twitter Follow 3d Button You can use it for other social network.
http://codepen.io/Guja1501/pen/GgZQdP

Social Buttons With Icon Fonts


HTML + CSS
Another set of social buttons for anyone to use/take inspiration from. This set takes advantage of Font Awesome icon pack.
http://codepen.io/davidpottrell/pen/MYabyp

Cute Buttons


HTML (Jade) + CSS (SCSS)
http://codepen.io/XDBoy018/pen/JooVmv

Slide-out Social Buttons


HTML + CSS (SCSS)
An experiment with hover states and social buttons.
http://codepen.io/stevenschobert/pen/NPPymX

Animated Share Button

image
HTML + CSS + JavaScript (jQuery)
Animated Share Button using jQuery, Timeline Max.
http://codepen.io/mlegrix/pen/myydpX

Cool Effect Gradient Button


HTML + CSS
http://codepen.io/HornFl4kes/pen/ZYyoYg

Button With Simple Effect On Hover


HTML + CSS
Button with simple effect on hover! Single element required.
http://codepen.io/onediv/pen/jEmjap

Flat Buttons


HTML + CSS (SCSS)
A collection of Flat buttons with a little animation I made. Pure CSS with SCSS.
http://codepen.io/BenjaminVilina/pen/wBdgXX

Upvote Button


HTML + CSS (SCSS)
http://codepen.io/MRKS/pen/MYpVPW

Slick Button


HTML + CSS (SCSS)
http://codepen.io/karimbalaa/pen/qERbBY

Animated Ghost Button


HTML + CSS
http://codepen.io/numerical/pen/XJKeop

Small Share Button


HTML + CSS (SCSS)
I saw a gif of this animation somewhere on the Internet, can’t find where. Thought it was cool. (No js, except the reset )
http://codepen.io/Mamboleoo/pen/ZYOvVZ

More CSS Like Buttons


HTML + CSS + JavaScript (jQuery)
More ‘like’ buttons for blogs in css!
http://codepen.io/GriffinImer/pen/JoKpoX/

Colored Cart Buttons


HTML + CSS (SCSS)
Awesome cart buttons for your store.
http://codepen.io/ScottMarshall/pen/dPXvRY

Upload Button


HTML (Jade) + CSS (Stylus)
http://codepen.io/andreasstorm/pen/raqoyb

Button Hover Animation


HTML + CSS (SCSS)
http://codepen.io/leighk91/pen/raqxBR

Facebook Button


HTML + CSS
http://codepen.io/ramooona/pen/RNYzwX

Diagonal Fill Button Hover Effect


HTML + CSS
Uses calc to leave symmetrical wedges on either side of the button.
http://codepen.io/kzf/pen/LEEzew

 

原文来自:http://cssbuttons.tumblr.com/

收集整理:DYoung

发表评论