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

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

Button Animation

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
http://codepen.io/alexpate/pen/YyLOWQ/

Expanding Share Button

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (LESS) + JavaScript (jQuery)
Delicious transitions going on here :-)
http://codepen.io/tamashi/pen/ojyoWr

Button Disabled And Loading States

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
http://codepen.io/brandonkennedy/pen/RWGyoE

Submit Button Animation

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS
Fly little plane, flay!
http://codepen.io/theotix/pen/cAxIv

Social Button Animation

《【前端动效】一大波css按钮动效袭来(之二)》
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

《【前端动效】一大波css按钮动效袭来(之二)》
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

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SASS) + JavaScript (jQuery)
http://codepen.io/praktikdan/pen/jbqBWm

Neat Button

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
This is some fancy styling for a single-element button.  Hover over it!
http://codepen.io/ScottKaye/pen/pjgGVM/

OK Button

《【前端动效】一大波css按钮动效袭来(之二)》
HTML (Jade) + CSS (SCSS)
Hover effect – animation icons.
http://codepen.io/fixcl/pen/pjjBGG

Button Effects

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (LESS)
http://codepen.io/nicmitch/pen/ojgxYP

Button Outline Animation

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SASS)
Just a little animation for a button style.
http://codepen.io/codeProKid/pen/bdXqKp

Command Key

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
A command key written with HTML and CSS. Inspired Macintosh keyboards.
http://codepen.io/karlerikjonatan/pen/EHgAb

CSS Button

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
Just another button.
http://codepen.io/ajv/pen/ojjpNv

Download Progress Interaction

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS) + JavaScript (jQuery) + SVG
Inspiration : https://dribbble.com/shots/1859666-Downloading-progress-CSS
http://codepen.io/balapa/pen/EVxeZg

Contact Button

《【前端动效】一大波css按钮动效袭来(之二)》
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)

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
http://codepen.io/btemperli/pen/LppbWz

Rounded Button With Cool Hover Effect

《【前端动效】一大波css按钮动效袭来(之二)》
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

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
Little hover effect with pseudo elements and borders.
http://codepen.io/magnificode/pen/WQvgda

CSS3 Hover Effects On Buttons

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS
http://codepen.io/sorinv/pen/qOdXYq

Cool Hover Button (video)

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS
Inspired By Alexandre Pitton.
http://codepen.io/Kiddo/pen/PPoyBP

Simple Button

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS
Playing with transitions.
http://codepen.io/porksausages/pen/XbLdMw

Colour Swipe Hover Effect For Buttons

《【前端动效】一大波css按钮动效袭来(之二)》
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

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
Simple multi layer box shadow hover effect.
http://codepen.io/magnificode/pen/zGVyQm

Blobs Button

《【前端动效】一大波css按钮动效袭来(之二)》
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

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS
Just a CSS spinning button to test out the concept.
http://codepen.io/Nicolas-Roberts/pen/MwMNOv

Button Hover Animations

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
A set of button hover animations.
http://codepen.io/phenax/pen/vOoOWK

Sullivan Buttons

《【前端动效】一大波css按钮动效袭来(之二)》
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

《【前端动效】一大波css按钮动效袭来(之二)》
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

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS
http://codepen.io/ahung02590/pen/EjzvjR

Faux 3D Hover Effects with CSS

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
Purely CSS Faux Hover effect for some buttons.
http://codepen.io/akrigline/pen/PqvxEL

Collection of Button Hover Effects

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
A few examples of flashy hover effects.Work in Progress.
http://codepen.io/davidicus/pen/emgQKJ

Direction-aware Button Hover Animation

《【前端动效】一大波css按钮动效袭来(之二)》
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

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SASS)
http://codepen.io/kamrade/pen/mJgZpo

Amy Winehouse Doc Button

《【前端动效】一大波css按钮动效袭来(之二)》
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

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
Animating the span letters of the buttons for neat text effects.
http://codepen.io/MuseMetrics/pen/pJBVxO

Sketchy Button

《【前端动效】一大波css按钮动效袭来(之二)》
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

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
Short example for transitions on  buttons.
http://codepen.io/Ingemarlbs/pen/yNraBp

8-bit Hovers

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS) + JavaScript (jQuery)
8-bit inspired hover effects.
http://codepen.io/tstoik/pen/EjMzRZ/

Simple Flat Buttons

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
http://codepen.io/maziarzamani/pen/YXgvjv

Rotating Icon Buttons

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

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

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
Sass mixin for creating arrow buttons. Uses transform: skew on pseudo-elements.
http://codepen.io/giana/pen/VLRmgG

Buttons Hover Effect

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS
http://codepen.io/alidz/pen/KpEWRr

Social Share Button

《【前端动效】一大波css按钮动效袭来(之二)》
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

《【前端动效】一大波css按钮动效袭来(之二)》
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

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
The button shows you more information when you hover it.
http://codepen.io/miroot/pen/hmeHn

Fancy 3D Button

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
Proof of concept for a 3d button.
http://codepen.io/Maximilianos/pen/xHCwo

Squared Button

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS
http://codepen.io/Sejul/pen/CuhDF

Button With Slide Hover Transition

《【前端动效】一大波css按钮动效袭来(之二)》
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

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (Stylus) + JavaScript (CoffeeScript)
http://codepen.io/andreasstorm/pen/neCBu

Twitter Button

《【前端动效】一大波css按钮动效袭来(之二)》
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

《【前端动效】一大波css按钮动效袭来(之二)》
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

《【前端动效】一大波css按钮动效袭来(之二)》
HTML (Jade) + CSS (SCSS)
http://codepen.io/XDBoy018/pen/JooVmv

Slide-out Social Buttons

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
An experiment with hover states and social buttons.
http://codepen.io/stevenschobert/pen/NPPymX

Animated Share Button

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS + JavaScript (jQuery)
Animated Share Button using jQuery, Timeline Max.
http://codepen.io/mlegrix/pen/myydpX

Cool Effect Gradient Button

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS
http://codepen.io/HornFl4kes/pen/ZYyoYg

Button With Simple Effect On Hover

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS
Button with simple effect on hover! Single element required.
http://codepen.io/onediv/pen/jEmjap

Flat Buttons

《【前端动效】一大波css按钮动效袭来(之二)》
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

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
http://codepen.io/MRKS/pen/MYpVPW

Slick Button

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
http://codepen.io/karimbalaa/pen/qERbBY

Animated Ghost Button

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS
http://codepen.io/numerical/pen/XJKeop

Small Share Button

《【前端动效】一大波css按钮动效袭来(之二)》
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

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS + JavaScript (jQuery)
More ‘like’ buttons for blogs in css!
http://codepen.io/GriffinImer/pen/JoKpoX/

Colored Cart Buttons

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
Awesome cart buttons for your store.
http://codepen.io/ScottMarshall/pen/dPXvRY

Upload Button

《【前端动效】一大波css按钮动效袭来(之二)》
HTML (Jade) + CSS (Stylus)
http://codepen.io/andreasstorm/pen/raqoyb

Button Hover Animation

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS (SCSS)
http://codepen.io/leighk91/pen/raqxBR

Facebook Button

《【前端动效】一大波css按钮动效袭来(之二)》
HTML + CSS
http://codepen.io/ramooona/pen/RNYzwX

Diagonal Fill Button Hover Effect

《【前端动效】一大波css按钮动效袭来(之二)》
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

点赞

发表评论