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

2015年11月27日 3846点热度 4人点赞 0条评论

上次给大家分享了《【前端动效】一大波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/

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)

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

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

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

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

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