<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3实现多款创意按钮 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<!-- Top Navigation -->
<section class="color-1">
<p class="text note-touch">Note that on mobile devices the
effects might not all work as intended.</p>
<p>
<button class="btn btn-1 btn-1a">Button</button>
<button class="btn btn-1 btn-1b">Button</button>
<button class="btn btn-1 btn-1c">Button</button>
</p>
<p>
<button class="btn btn-1 btn-1d">Button</button>
<button class="btn btn-1 btn-1e">Button</button>
<button class="btn btn-1 btn-1f">Button</button>
</p>
<div style="text-align:center;clear:both">
<p>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</section>
<section class="color-2">
<p>
<button class="btn btn-2 btn-2a">Button</button>
<button class="btn btn-2 btn-2b">Button</button>
</p>
<p>
<button class="btn btn-2 btn-2c">Button</button>
<button class="btn btn-2 btn-2d">Button</button>
</p>
<p>
<button class="btn btn-2 btn-2e">Button</button>
<button class="btn btn-2 btn-2f">Button</button>
</p>
<p>
<button class="btn btn-2 btn-2g">Button</button>
<button class="btn btn-2 btn-2h">Button</button>
</p>
<p>
<button class="btn btn-2 btn-2i">Yes</button>
<button class="btn btn-2 btn-2j">No</button>
</p>
</section>
<section class="color-3">
<p>
<button class="btn btn-3 btn-3a icon-cart">Add to cart</button>
<button class="btn btn-3 btn-3b icon-star-2">Bookmark</button>
</p>
<p>
<button class="btn btn-3 btn-3c icon-heart-2">Favorite</button>
</p>
<p>
<button class="btn btn-3 btn-3d icon-cog">Settings</button>
<button class="btn btn-3 btn-3e icon-arrow-right">Send data</button>
</p>
</section>
<section class="color-4">
<p>
<button class="btn btn-4 btn-4a icon-arrow-right">Continue</button>
<button class="btn btn-4 btn-4b icon-arrow-left">Return</button>
</p>
<p>
<button class="btn btn-4 btn-4c icon-arrow-right">Continue</button>
<button class="btn btn-4 btn-4d icon-arrow-left">Return</button>
</p>
</section>
<section class="color-5">
<p>
<button class="btn btn-5 btn-5a icon-cart"><span>Add to cart</span></button>
<button class="btn btn-5 btn-5a icon-remove"><span>Delete</span></button>
<button class="btn btn-5 btn-5a icon-cog"><span>Settings</span></button>
</p>
<p>
<button class="btn btn-5 btn-5b icon-cart"><span>Add to cart</span></button>
<button class="btn btn-5 btn-5b icon-remove"><span>Delete</span></button>
<button class="btn btn-5 btn-5b icon-cog"><span>Settings</span></button>
</p>
</section>
<section class="color-6">
<p>
<button class="btn btn-6 btn-6a">Button</button>
<button class="btn btn-6 btn-6b">Button</button>
<button class="btn btn-6 btn-6c">Button</button>
</p>
<p>
<button class="btn btn-6 btn-6d">Button</button>
<button class="btn btn-6 btn-6e">Button</button>
<button class="btn btn-6 btn-6f">Button</button>
</p>
<p>
<button class="btn btn-6 btn-6g">Button</button>
<button class="btn btn-6 btn-6h">Button</button>
<button class="btn btn-6 btn-6i">Button</button>
</p>
<p>
<button class="btn btn-6 btn-6j">Button</button>
<button class="btn btn-6 btn-6k">Button</button>
<button class="btn btn-6 btn-6l">Button</button>
</p>
</section>
<section class="color-7" id="btn-click">
<p class="text">Click on the buttons to see the effect</p>
<p>
<button class="btn btn-7 btn-7a icon-truck">Order item</button>
<button class="btn btn-7 btn-7b icon-envelope">Send message</button>
</p>
<p>
<button class="btn btn-7 btn-7c btn-icon-only icon-arrow-right">
Submit</button>
<button class="btn btn-7 btn-7d btn-icon-only icon-remove">
Empty</button>
</p>
<p>
<button class="btn btn-7 btn-7e btn-icon-only icon-heart">
Like</button>
<button class="btn btn-7 btn-7f btn-icon-only icon-star">Fav</button>
<button class="btn btn-7 btn-7g btn-icon-only icon-plus">Add</button>
</p>
<p>
<button class="btn btn-7 btn-7h icon-envelope">Submit form</button>
<button class="btn btn-7 btn-7h icon-envelope">Submit form</button>
</p>
<div id="trash-effect" class="trash-effect">
<button class="btn btn-7 btn-7i btn-icon-only icon-remove-2">
Remove</button>
<div class="icon-file"></div>
<div class="icon-file"></div>
<div class="icon-file"></div>
</div>
</section>
<section class="color-8">
<p class="perspective">
<button class="btn btn-8 btn-8a">3D Button</button>
</p>
<p class="perspective">
<button class="btn btn-8 btn-8b">3D Button</button>
</p>
<br />
<p class="perspective">
<button class="btn btn-8 btn-8c">3D Button</button>
</p>
<p class="perspective">
<button class="btn btn-8 btn-8d">3D Button</button>
</p>
<p class="text">Click the following buttons to see the effect:</p>
<p class="perspective">
<button class="btn btn-8 btn-8e">3D Button</button>
</p>
<p class="perspective">
<button class="btn btn-8 btn-8f">3D Button</button>
</p>
<br />
<p class="perspective">
<button class="btn btn-8 btn-8g">3D Button</button>
</p>
<p class="perspective">
<button class="btn btn-8 btn-8g">3D Button</button>
</p>
</section>
</div><!-- /container -->
<script src="js/classie.js"></script>
<script>
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 );
</script>
css3实现多款创意按钮 css3实现多款创意按钮网页特效.zip
版权申诉
184 浏览量
2022-11-17
21:18:12
上传
评论
收藏 38KB ZIP 举报
css3实现多款创意按钮 css3实现多款创意按钮网页特效.zip （14个子文件） 
css3实现多款创意按钮 css3实现多款创意按钮网页特效 jiaoben1076 css 
default.css 3KB component.css 29KB fonts icomoon icomoon.woff 4KB
icomoon.svg 9KB icomoon.dev.svg 10KB icomoon.eot 4KB icomoon.ttf 3KB codropsicons codropsicons.woff 2KB codropsicons.svg 4KB codropsicons.ttf 2KB codropsicons.eot 2KB
index.html 8KB js modernizr.custom.js 8KB classie.js 2KB资源评论
