特效描述:css3实现 多款创意 按钮特效。css3实现多款创意按钮特效
代码结构
1. 引入CSS
2. 引入JS
3. HTML代码
Note that on mobile devices the
effects might not all work as intended.
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Yes
No
Add to cart
Bookmark
Favorite
Settings
Send data
Continue
Return
Continue
Return
Add to cart
Delete
Settings
Add to cart
Delete
Settings
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Click on the buttons to see the effect
Order item
Send message
Submit
Empty
Like
Fav
Add
Submit form
Submit form
Remove
3D Button
3D Button
3D Button
3D Button
Click the following buttons to see the effect:
3D Button
3D Button
3D Button
3D Button
var buttons7Click = Array.prototype.slice.call( document.querySelectorAll( '#btn-click button' ) ),
buttons9Click = Array.prototype.slice.call( document.querySelectorAll( 'button.btn-8g' ) ),
totalButtons7Click = buttons7Click.length,
totalButtons9Click = buttons9Click.length;
buttons7Click.forEach( function( el, i ) { el.addEventListener( 'click', activate, false ); } );
buttons9Click.forEach( function( el, i ) { el.addEventListener( 'click', activate, false ); } );
function activate() {
var self = this, activatedClass = 'btn-activated';
if( classie.has( this, 'btn-7h' ) ) {
// if it is the first of the two btn-7h then activatedClass = 'btn-error';
// if it is the second then activatedClass = 'btn-success'
activatedClass = buttons7Click.indexOf( this ) === totalButtons7Click-2 ? 'btn-error' : 'btn-success';
}
else if( classie.has( this, 'btn-8g' ) ) {
// if it is the first of the two btn-8g then activatedClass = 'btn-success3d';
// if it is the second then activatedClass = 'btn-error3d'
activatedClass = buttons9Click.indexOf( this ) === totalButtons9Click-2 ? 'btn-success3d' : 'btn-error3d';
}
if( !classie.has( this, activatedClass ) ) {
classie.add( this, activatedClass );
setTimeout( function() { classie.remove( self, activatedClass ) }, 1000 );
}
}
document.querySelector( '.btn-7i' ).addEventListener( 'click', function() {
classie.add( document.querySelector( '#trash-effect' ), 'trash-effect-active' );
}, false );