Alexander ADAM alexanderadam
⌨️
alexanderadam
/ dabblet.css
Created
October 18, 2015 22:55
— forked from LeaVerou/dabblet.css
YouTubesque morphing button
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * YouTubesque morphing button | |
| * Requires clip-path with CSS Shapes support, not just url() | |
| * http://caniuse.com/#feat=css-clip-path | |
| */ | |
| @keyframes play { to { | |
| -webkit-clip-path: polygon(0 0, 100% 50%, 100% 50%, 0 100%); | |
| clip-path: polygon(0 0, 100% 50%, 100% 50%, 0 100%); | |
| /* it should be 50% 100% (one value), but Chrome & Safari are buggy (in different ways), hence the 51 & the duplication */ |
NewerOlder