效果图
今天带来的是 12种css3按钮特效 ！
点击收藏起来吧！
若想要文件版源码，请看评论区！
CSS源码:
| *{ | |
| margin:0; | |
| padding:0; | |
| } | |
| html{ | |
| background-color: #eaf0f2; | |
| } | |
| .container{ | |
| text-align: center; | |
| font: bold 14px sans-serif; | |
| } | |
| .dropdown{ | |
| text-align: center; | |
| width: 200px; | |
| margin: 50px auto 160px; | |
| position: relative; | |
| color: gray; | |
| } | |
| .dropdown a{ | |
| display: block; | |
| box-sizing: border-box; | |
| text-decoration: none; | |
| color: #FFF; | |
| text-align: center; | |
| background-color: #6BB9E1; | |
| font-size: 13px; | |
| width: 120px; | |
| padding: 9px 0; | |
| border-radius: 2px; | |
| margin: 4px auto 0; | |
| opacity: 0.8; | |
| -webkit-transition: 0.2s ease; | |
| transition: 0.2s ease; | |
| } | |
| .dropdown span { | |
| background-color: #EC7164; | |
| display: block; | |
| box-sizing: border-box; | |
| color: #FFF; | |
| text-align: left; | |
| font-size: 16px; | |
| width: 200px; | |
| padding: 11px 15px; | |
| line-height: 1; | |
| border-radius: 3px; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); | |
| } | |
| .dropdown span:after{ | |
| content: ''; | |
| position: absolute; | |
| right: 20px; | |
| top: 17px; | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| border-width: 5px 5px 0 5px; | |
| border-color: #fff transparent transparent transparent; | |
| -webkit-transition: 0.2s ease-in; | |
| transition: 0.2s ease-in; | |
| } | |
| .dropdown ul li a.active{ | |
| background-color: #687AD7; | |
| opacity: 0.8 !important; | |
| } | |
| .dropdown ul li a:hover { | |
| opacity: 1; | |
| } | |
| .dropdown ul{ | |
| position: absolute; | |
| z-index: 200; | |
| left: 50%; | |
| margin: 10px 0 0 -250px; | |
| list-style: none; | |
| padding: 0; | |
| overflow: hidden; | |
| width: 500px; | |
| height: 0; | |
| -webkit-transition: 0.4s ease; | |
| transition: 0.4s ease; | |
| } | |
| .dropdown ul li{ | |
| display: inline-block; | |
| } | |
| .dropdown:hover ul { | |
| height: 180px; | |
| } | |
| /*------------------------------------ | |
| Demo footer. Ignore and remove | |
| -------------------------------------*/ | |
| footer { | |
| font: normal 16px Arial, Helvetica, sans-serif; | |
| padding: 15px 35px; | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background-color: #1B1F22; | |
| box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2); | |
| z-index: 1; | |
| } | |
| footer a.tz{ | |
| font-weight: normal; | |
| font-size: 16px !important; | |
| text-decoration: none !important; | |
| display: block; | |
| margin-right: 300px; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| color: #CCC !important; | |
| position: relative; | |
| padding-left: 140px; | |
| } | |
| footer a.tz:before{ | |
| font-weight: bold; | |
| color: #FFF; | |
| content: 'tutorial'; | |
| position: absolute; | |
| text-align: right; | |
| width: 100px; | |
| left: -20px; | |
| } | |
| footer a.tz:after{ | |
| content: 'zine'; | |
| position: absolute; | |
| font-weight: bold; | |
| color: #DA431C; | |
| left: 80px; | |
| } | |
| footer .close{ | |
| position: absolute; | |
| cursor: pointer; | |
| width: 8px; | |
| height: 8px; | |
| top: 10px; | |
| right: 12px; | |
| color: #FFF; | |
| font-weight: bold; | |
| font-size: 12px; | |
| line-height: 12px; | |
| } | |
| footer #tzine-actions{ | |
| position: absolute; | |
| top: 15px; | |
| right: 30px; | |
| width: 340px; | |
| text-align: right; | |
| } | |
| footer #tzine-actions iframe{ | |
| display: inline-block; | |
| height: 21px; | |
| width: 95px; | |
| } | |
| @media (max-width: 1024px) { | |
| #bsaHolder, footer{ display:none;} | |
| } | |
| Index: | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>12 Fun Sharing Button Effects</title> | |
| <link rel="stylesheet" href="./assets/css/demo.css"> | |
| <style> | |
| .image-effect-fall-back{ | |
| width: 500px; | |
| height: 300px; | |
| position: relative; | |
| margin: 0 auto; | |
| -webkit-perspective: 800px; | |
| perspective: 800px; | |
| } | |
| .image-effect-fall-back .image-layer{ | |
| position: absolute; | |
| top:0; | |
| left: 0; | |
| height: 300px; | |
| -webkit-transition: 0.6s; | |
| transition: 0.6s; | |
| z-index: 1; | |
| } | |
| .image-effect-fall-back:hover .image-layer{ | |
| -webkit-transform: rotateX(70deg); | |
| transform: rotateX(70deg); | |
| overflow: visible; | |
| } | |
| .image-effect-fall-back .image-layer img{ | |
| height: 100%; | |
| } | |
| .image-effect-fall-back .image-layer:before{ | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.5); | |
| box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5); | |
| opacity: 0; | |
| -webkit-transition: all 0.5s; | |
| transition: all 0.5s; | |
| -webkit-transform: rotateX(114deg) translateZ(-26px) translateY(110px) scale(0.75); | |
| transform: rotateX(114deg) translateZ(-26px) translateY(110px) scale(0.75); | |
| -webkit-transform-origin: bottom; | |
| -ms-transform-origin: bottom; | |
| transform-origin: bottom; | |
| } | |
| .image-effect-fall-back:hover .image-layer:before { | |
| opacity: 0.3; | |
| } | |
| .image-effect-fall-back .share-layer{ | |
| position: absolute; | |
| bottom: 100px; | |
| left: 0; | |
| width: 100%; | |
| height: 100px; | |
| opacity: 0; | |
| z-index: 10; | |
| -webkit-transition: 0.6s; | |
| transition: 0.6s; | |
| -webkit-transform: rotateX(70deg); | |
| transform: rotateX(70deg); | |
| } | |
| .image-effect-fall-back:hover .share-layer { | |
| opacity: 1; | |
| -webkit-transform: rotateX(0deg) translateY(-70px); | |
| transform: rotateX(0deg) translateY(-70px); | |
| } | |
| .share-button{ | |
| display: inline-block; | |
| text-decoration: none; | |
| color: #ffffff; | |
| padding: 12px; | |
| width: 80px; | |
| border-radius: 2px; | |
| margin:25px 10px; | |
| } | |
| .share-via-facebook{ | |
| background-color:#3b5998; | |
| } | |
| .share-via-twitter{ | |
| background-color:#00aced; | |
| } | |
| .share-via-google{ | |
| background-color:#d34836; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="dropdown"> | |
| <span>Choose a Demo</span> | |
| <ul class="button-effects-list"> | |
| <li><a href="index.html" class="active">Fall Back</a></li> | |
| <li><a href="paper-flip.html">Paper Flip</a></li> | |
| <li><a href="rumble.html">Rumble</a></li> | |
| <li><a href="3d-doors.html">Doors 3D</a></li> | |
| <li><a href="circles.html">Circles</a></li> | |
| <li><a href="rotation.html">Rotation</a></li> | |
| <li><a href="simple.html">Simple</a></li> | |
| <li><a href="doors.html">Doors</a></li> | |
| <li><a href="zoom.html">Zoom</a></li> | |
| <li><a href="border.html">Border</a></li> | |
| <li><a href="future.html">Future</a></li> | |
| <li><a href="pop-ups.html">Pop Ups</a></li> | |
| </ul> | |
| </div> | |
| <div class="image-effect-fall-back"> | |
| <div class="share-layer"> | |
| <a href="#" class="share-button share-via-facebook"> | |
| <i class="fa fa-facebook"></i> | |
| </a> | |
| <a href="#" class="share-button share-via-twitter"> | |
| <i class="fa fa-twitter"></i> | |
| </a> | |
| <a href="#" class="share-button share-via-google"> | |
| <i class="fa fa-google"></i> | |
| Google + | |
| </a> | |
| </div> | |
| <div class="image-layer"> | |
| <img src="assets/pictures/tree.jpg" width="500" alt="California surf"> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <a class="tz" href="http://tutorialzine.com/2014/11/12-fun-sharing-button-effects/">12 Fun Sharing Button Effects</a> | |
| <div id="tzine-actions"></div> | |
| <span class="close">✕</span> | |
| </footer> | |
| <!-- Demo ads. Please ignore and remove. --> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
| <script src="http://cdn.tutorialzine.com/misc/enhance/v2.js" async></script> | |
| </body> | |
| </html> |