0.0°

【前端动效】一大波css按钮动效袭来...

经验类型经验/观点
经验属性原创文章
经验版权署名

D_Young

关注

21971 0 36 2015-11-27

今天带来67个按钮动效，附GIF效果和codepen链接，bingo~总有一款适合你！

上次给大家分享了《【前端动效】一大波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 + CSSFly little plane, flay!

http://codepen.io/theotix/pen/cAxIv

Social Button Animation

HTML + CSSInspired 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) + SVGInspiration : 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 + CSSInspired By Alexandre Pitton.

http://codepen.io/Kiddo/pen/PPoyBP

Simple Button

HTML + CSSPlaying 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

Button Spinner Test

HTML + CSSJust 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

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) + JavaScriptRandomly 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 + CSSI 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