Mẫu Button ấn tượng 4



Mẫu button 4 này click vào nhúng nhúng thụn thụn

1. HTML

							
OK

Matthew Wheeler design and illustration of the great Chris Luders.

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 để 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.