Buttons (CSS3) and buttons (css3)

Buttons (CSS3) and buttons (css3)

Preview The effect first

The Transition attribute of CSS3 is used: Set the animation time and effect; Transform attribute: Set the element rotation and displacement; box-sizing attribute: define specific elements of a region in a specific way;

Method for creating a triangle:

1 width: 0; height: 0; overflow: hidden; 2 border: 7px solid transparent; 3 border-top-color: #2dcb70;/* width and height are all zero, set the border to transparent first, and then set the color of the border separately as needed */

HTML code

 1 <div class="box"> 2     <div class="link link-miss"> 3         <span class="icon"></span> 4         <a href="#" class="button" data="My mission is clear"> 5             <span class="line line-top"></span> 6             <span class="line line-right"></span> 7             <span class="line line-bottom"></span> 8             <span class="line line-left"></span> 9             MISSION10         </a>11     </div>12     <div class="link link-play">13         <span class="icon"></span>14         <a href="#" class="button" data="This is my playGroup">15             <span class="line line-top"></span>16             <span class="line line-right"></span>17             <span class="line line-bottom"></span>18             <span class="line line-left"></span>19             PLAY20         </a>21     </div>22     <div class="link link-touch">23         <span class="icon"></span>24         <a href="#" class="button" data="This is my Touch">25             <span class="line line-top"></span>26             <span class="line line-right"></span>27             <span class="line line-bottom"></span>28             <span class="line line-left"></span>29             TOUCH30         </a>31     </div>32     <div class="tip">33         <em></em><span></span>34     </div>35 </div>

CSS code

1 * {margin: 0; 2 padding: 0;} 3 4 body {background: #333;} 5. box {6 width: 800px; height: 280px; margin: 50px auto; 7} 8. box. link {9 width: 205px; height: 280px; float: left; margin: 0 20px; 10} 11. link. icon {12 display: inline-block; width: 100%; height: pixel; cursor: pointer; 13 transition: bytes-out 0.2 s; 14} 15. link-miss. icon {16 background: url (.. /images/mission.png) no-repeat center; 17} 18. link-play. icon {19 background: url (.. /images/play.png) no-repeat center; 20} 21. link-touch. icon {22 background: url (.. /images/touch.png) no-repeat center; 23} 24. link. icon: hover {25 transform: rotate (360deg) scale (1.2); 26} 27. button {28 display: block; width: 180px; height: 50px; line-height: 50px; text-decoration: none; color: #2dcb70; 29 font-family: Arial; font-weight: bolder; border: 2px solid rgba (255,255,255, 0.6); 30 padding-left: 20px; margin: 0 auto; background: url (.. /images/allow.png) no-repeat 130px center; 31 box-sizing: border-box; 32 transition: 0.4 s loading; 33 position: relative; 34} 35. button: hover {36 border: 2px solid rgba (255,255,255, 1); 37 background-position: 140px center; 38} 39/* 40 CSS3 -- Transition 41 Syntax: transition: property duration timing-function delay; 42 Description: 43 transition-property: Specifies the name of the CSS attribute for setting the transition effect; 44 transition-duration: specifies the number of seconds or milliseconds required to complete the transition effect; 45 transition-timing-function: Specifies the speed curve of the speed effect; 46 transition-delay: defines when the transition effect starts; 47 CSS3 -- Transform 48 transform attribute applies 2D or 3D conversion to the element; this attribute allows us to rotate, zoom, move, or tilt elements. 49 CSS3 -- box-sizing 50 box-sizing attribute allows us to define specific elements that match a region in a specific way; 51 Syntax: box-sizing: content-box | border-box | inherit; 52 Description: 53 content-box :( default) the width and height are respectively applied to the content box of the element, draw the element's padding and border based on the width and height; 54 border-box: any padding and border specified for the element will be drawn within the configured width and height; 55. The actual width and height of the content can be obtained by subtracting the border and the padding from the configured width and height respectively. 56 */57. button. line {58 position: absolute; background: none; transition: 0.4 s; 59} 60. button: hover. line {61 background: # f00; 62} 63 64. button. line-top {65 width: 0px; height: 2px; top:-2px; left:-110%; 66} 67. button: hover. line-top {68 width: 180px; left:-2px; 69} 70 71. button. line-right {72 width: 2px; height: 0px; right:-2px; top:-110%; 73} 74. button: hover. line-right {75 height: 50px; top:-2px; 76} 77 78. button. line-bottom {79 width: 0px; height: 2px; bottom:-2px; right:-110%; 80} 81. button: hover. line-bottom {82 width: 180px; right:-2px; 83} 84 85. button. line-left {86 width: 2px; height: 0px; left:-2px; bottom:-110%; 87} 88. button: hover. line-left {89 height: 50px; bottom:-2px; 90} 91. tip {92 position: absolute; padding: 0 14px; height: 35px; line-height: 35px; background: #2dcb70; 93 color: # fff; font-size: 18px; margin: 0 auto; border-radius: 3px; top: 160px; opacity: 0; 94} 95. tip em {96 font-style: normal; font-size: 18px; color: # fff; 97} 98. tip span {99 display: block; width: 0; height: 0; overflow: hidden; position: absolute; top: 35px; left: 50%; 100 border: 7px solid transparent; border-top-color: #2dcb70; margin-left:-3px; 101}

JQuery code

 1 $(function(){ 2     $('.link .button').hover(function(){ 3         var title = $(this).attr('data'); 4         $('.tip em').text(title); 5         var pos = $(this).offset().left; 6         var dis = parseInt($('.tip').outerWidth()-$(this).outerWidth())/2; 7         var l = pos - dis;  8         $('.tip').css({'left':l+'px'}).animate({'top':180,'opacity':1},300); 9     },function(){10         if(!$('.tip').is(':animated')){11             $('.tip').animate({'top':160,'opacity':0},50);12         }13     })14 });

Learning from MOOC network http://www.imooc.com/learn/5