Mẫu Button ấn tượng 4
Chia sẻ
Mẫu button 4 này click vào nhúng nhúng thụn thụn
1. HTML
<figure class="circle">
<div class="mask-b"><span class="ok-btn">OK</span>
<div class="cursor"></div>
</div>
</figure>
<div class="credit-design">
<p><a href="http://www.krop.com/mattwheeler/">Matthew Wheeler</a> design and illustration of the great <a href="http://www.chrislueders.de/sponsorpay">Chris Luders.</a></p>
</div>
2. CSS
/* images sprites
*/
.circle {
cursor: pointer;
width: 215px;
height: 215px;
position: absolute;
top: 50%;
left: 50%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.mask-a,
.mask-b {
border-radius: 100%;
position: relative;
width: 100%;
height: 100%;
}
.mask-a {
background: #1b2d41;
overflow: hidden;
-webkit-mask-position: 0 0;
-webkit-mask-size: 215px 215px;
-webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/mask_svg.svg);
z-index: 10;
}
.mask-b {
background: #1b2d41;
}
/*=====================================================================================
OK
=======================================================================================
*/
.cursor,
.cursor::before {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/ok_1.svg) no-repeat center center;
position: absolute;
width: 44px;
height: 44px;
}
.cursor {
background-position: 0px -31px;
top: 7em;
left: 9em;
will-change: transform;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 550ms ease;
transition: -webkit-transform 550ms ease;
transition: transform 550ms ease;
transition: transform 550ms ease, -webkit-transform 550ms ease;
}
.cursor::before {
background-position: -43px -30px;
content: "";
top: -0.3em;
left: 0.3em;
will-change: transform;
-webkit-transform: translateX(0px) translateZ(0px);
transform: translateX(0px) translateZ(0px);
-webkit-transition: -webkit-transform 550ms ease;
transition: -webkit-transform 550ms ease;
transition: transform 550ms ease;
transition: transform 550ms ease, -webkit-transform 550ms ease;
}
.ok-btn {
background: #1AAF5D;
border-radius: 0.7em;
box-shadow: 0 5px 0 #0A7237;
color: #fff;
font-size: 2em;
font-weight: 500;
text-shadow: 0 2px 0 #0A7237;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
width: 148px;
height: 70px;
margin-left: -74px;
margin-top: -35px;
will-change: transform;
-webkit-transform: translateY(0px) translateZ(0px);
transform: translateY(0px) translateZ(0px);
line-height: 70px;
-webkit-transition: all 550ms ease;
transition: all 550ms ease;
}
.circle:hover > .mask-b > .ok-btn {
background: #179951;
box-shadow: 0 0 0 1px #064320, inset 0 1px 0 0 #0A7237;
-webkit-transform: translateY(5px) translateZ(0px);
transform: translateY(5px) translateZ(0px);
-webkit-transition: all 450ms 100ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
transition: all 450ms 100ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
}
.circle:hover > .mask-b > .cursor {
-webkit-transform: translate3d(-0.3em, 0.5em, 0);
transform: translate3d(-0.3em, 0.5em, 0);
-webkit-transition: -webkit-transform 450ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
transition: -webkit-transform 450ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
transition: transform 450ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
transition: transform 450ms cubic-bezier(0.68, -0.55, 0.265, 1.65), -webkit-transform 450ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
}
.circle:hover > .mask-b > .cursor::before {
-webkit-transform: translateX(-4px) translateZ(0px);
transform: translateX(-4px) translateZ(0px);
-webkit-transition: -webkit-transform 450ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
transition: -webkit-transform 450ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
transition: transform 450ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
transition: transform 450ms cubic-bezier(0.68, -0.55, 0.265, 1.65), -webkit-transform 450ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
overflow-x: hidden;
}
body {
background: #1E4063;
font-family: 'Fira Sans', sans-serif;
}
figure {
margin: 0;
}
.credit-design {
color: #315277;
font-weight: 400;
position: absolute;
width: 100%;
left: 0;
bottom: 20px;
font-size: 0.8rem;
text-align: center;
}
.credit-design a {
color: #395f89;
text-decoration: none;
}
3. JAVASCRIPT
Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút Chia sẻđể mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.