上次给大家分享了《【前端动效】一大波css按钮动效袭来》 今天带来67个按钮动效,附GIF效果和codepen链接,bingo~总有一款适合你!
Button Animation
HTML + CSS (SCSS)
http://codepen.io/alexpate/pen/YyLOWQ/
HTML + CSS (LESS) + JavaScript (jQuery)
Delicious transitions going on here :-)http://codepen.io/tamashi/pen/ojyoWr
HTML + CSS (SCSS)
http://codepen.io/brandonkennedy/pen/RWGyoE
HTML + CSS
Fly little plane, flay!http://codepen.io/theotix/pen/cAxIv
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
HTML + CSS (SASS) + JavaScript (jQuery)
http://codepen.io/praktikdan/pen/jbqBWm
HTML + CSS (SCSS)
This is some fancy styling for a single-element button. Hover over it!http://codepen.io/ScottKaye/pen/pjgGVM/
HTML (Jade) + CSS (SCSS)
Hover effect - animation icons.http://codepen.io/fixcl/pen/pjjBGG
HTML + CSS (LESS)
http://codepen.io/nicmitch/pen/ojgxYP
HTML + CSS (SASS)
Just a little animation for a button style.http://codepen.io/codeProKid/pen/bdXqKp
HTML + CSS (SCSS)
A command key written with HTML and CSS. Inspired Macintosh keyboards.http://codepen.io/karlerikjonatan/pen/EHgAb
HTML + CSS (SCSS)
Just another button.http://codepen.io/ajv/pen/ojjpNv
HTML + CSS (SCSS) + JavaScript (jQuery) + SVG
Inspiration : https://dribbble.com/shots/1859666-Downloading-progress-CSShttp://codepen.io/balapa/pen/EVxeZg
HTML + CSS (SCSS)
Contact button from dribbble shot. Only for fun.Inspiration: https://dribbble.com/shots/2131627-Personal-Portfolio-Site/attachments/388736http://codepen.io/ajerez/pen/XmbQXQ
HTML + CSS (SCSS)
http://codepen.io/btemperli/pen/LppbWz
HTML + CSS (SCSS)
Based on http://tympanus.net/Development/CreativeButtons/ but upgraded to support not transparent background color.http://codepen.io/Osvalds/pen/yYNGxW
HTML + CSS (SCSS)
Little hover effect with pseudo elements and borders.http://codepen.io/magnificode/pen/WQvgda
HTML + CSS
http://codepen.io/sorinv/pen/qOdXYq
HTML + CSS
Inspired By Alexandre Pitton.http://codepen.io/Kiddo/pen/PPoyBP
HTML + CSS
Playing with transitions.http://codepen.io/porksausages/pen/XbLdMw
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
HTML + CSS (SCSS)
Simple multi layer box shadow hover effect.http://codepen.io/magnificode/pen/zGVyQm
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
Just a CSS spinning button to test out the concept.http://codepen.io/Nicolas-Roberts/pen/MwMNOv
HTML + CSS (SCSS)
A set of button hover animations.http://codepen.io/phenax/pen/vOoOWK
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.comhttp://codepen.io/daviddarnes/pen/VLXxMa
HTML + CSS (SCSS) + JavaScript (jQuery)
Inspired from https://dribbble.com/shots/1960058-Menu-Animation-Ferris-Wheel?list=searcheshttp://codepen.io/vivek3003/pen/bdmZVY
HTML + CSS
http://codepen.io/ahung02590/pen/EjzvjR
HTML + CSS (SCSS)
Purely CSS Faux Hover effect for some buttons.http://codepen.io/akrigline/pen/PqvxEL
HTML + CSS (SCSS)
A few examples of flashy hover effects.Work in Progress.http://codepen.io/davidicus/pen/emgQKJ
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
HTML + CSS (SASS)
http://codepen.io/kamrade/pen/mJgZpo
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
HTML + CSS (SCSS)
Animating the span letters of the buttons for neat text effects.http://codepen.io/MuseMetrics/pen/pJBVxO
HTML + CSS (SCSS) + JavaScript
Randomly generated rough edges using SVG filters.http://codepen.io/ScottPolhemus/pen/RPOxww
HTML + CSS (SCSS)
Short example for transitions on buttons.http://codepen.io/Ingemarlbs/pen/yNraBp
HTML + CSS (SCSS) + JavaScript (jQuery)
8-bit inspired hover effects.http://codepen.io/tstoik/pen/EjMzRZ/
HTML + CSS (SCSS)
http://codepen.io/maziarzamani/pen/YXgvjv
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
HTML + CSS
http://codepen.io/alidz/pen/KpEWRr
HTML + CSS
Social share button inspire with https://dribbble.com/shots/1034808-Widget?list=users&offset=2http://codepen.io/arjunamgain/pen/waXwrx
HTML + CSS (LESS)
A subtle button hover effect using CSS. Not very scalable, purely for experimentation.http://codepen.io/pmarich/pen/GgRyvb
HTML + CSS (SCSS)
The button shows you more information when you hover it.http://codepen.io/miroot/pen/hmeHn
HTML + CSS (SCSS)
Proof of concept for a 3d button.http://codepen.io/Maximilianos/pen/xHCwo
HTML + CSS
http://codepen.io/Sejul/pen/CuhDF
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
HTML + CSS (Stylus) + JavaScript (CoffeeScript)
http://codepen.io/andreasstorm/pen/neCBu
HTML + CSS
Twitter Follow 3d Button You can use it for other social network.http://codepen.io/Guja1501/pen/GgZQdP
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
HTML (Jade) + CSS (SCSS)
http://codepen.io/XDBoy018/pen/JooVmv
HTML + CSS (SCSS)
An experiment with hover states and social buttons.http://codepen.io/stevenschobert/pen/NPPymX
HTML + CSS + JavaScript (jQuery)
Animated Share Button using jQuery, Timeline Max.http://codepen.io/mlegrix/pen/myydpX
HTML + CSS
http://codepen.io/HornFl4kes/pen/ZYyoYg
HTML + CSS
Button with simple effect on hover! Single element required.http://codepen.io/onediv/pen/jEmjap
HTML + CSS (SCSS)
A collection of Flat buttons with a little animation I made. Pure CSS with SCSS.http://codepen.io/BenjaminVilina/pen/wBdgXX
HTML + CSS (SCSS)
http://codepen.io/MRKS/pen/MYpVPW
HTML + CSS (SCSS)
http://codepen.io/karimbalaa/pen/qERbBY
HTML + CSS
http://codepen.io/numerical/pen/XJKeop
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
HTML + CSS + JavaScript (jQuery)
More ‘like’ buttons for blogs in css!http://codepen.io/GriffinImer/pen/JoKpoX/
HTML + CSS (SCSS)
Awesome cart buttons for your store.http://codepen.io/ScottMarshall/pen/dPXvRY
HTML (Jade) + CSS (Stylus)
http://codepen.io/andreasstorm/pen/raqoyb
HTML + CSS (SCSS)
http://codepen.io/leighk91/pen/raqxBR
HTML + CSS
http://codepen.io/ramooona/pen/RNYzwX
HTML + CSS
Uses calc to leave symmetrical wedges on either side of the button.http://codepen.io/kzf/pen/LEEzew