Trang Chủ Thiết kế website CSS

Chia sẻ những Button Hover đẹp trên Codepen

A+A-
PrintEmail
Chia sẻ những Button Hover đẹp trên Codepen
Codepen.io là website cung cấp công cụ cho phép được lập trình và xem kết quả trực tiếp trên trình duyệt. Vì đây là một môi trường lập trình công cộng nên ở đó bạn sẽ thấy rất nhiều những demo, project do mọi người khắp thế giới chia sẻ.
Bài viết này mình muốn chia sẻ đến các bạn những dự án mà các lập trình viên đã tạo trên Codepen.io về chủ để Button Hover (hiệu ứng rê chuột) đẹp.

Button Hover Effect của Daniel Gonzalez

See the Pen Button Hover Effect by Daniel Gonzalez (@dan10gc) on CodePen.

Button Hover của Katherine Kato

See the Pen Button Hover by Katherine Kato (@kathykato) on CodePen.

Perspective button hover effect của Comehope

See the Pen Perspective button hover effect by Comehope (@comehope) on CodePen.

UI Button Hover Effect #2 của Daniel Gonzalez

See the Pen UI Button Hover Effect #2 by Daniel Gonzalez (@dan10gc) on CodePen.

Ở Demo này, lập trình viên họ đã sử dụng HTML (PUG) và SCSS nên mình chia sẻ HTML và CSS đã được convert lại như sau
Đối với HTML

<div class="container">
  <button class="btn" href="#">hover me</button>
</div>
Đối với Css

@import url("https://fonts.googleapis.com/css?family=Lato:400,700");
* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
}

body {
  font-family: "Lato", sans-serif;
  color: #111111;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  align-content: center;
  -webkit-box-pack: center;
          justify-content: center;
}

.container {
  width: auto;
  margin: auto;
}

@-webkit-keyframes topAnimation {
  from {
    -webkit-transform: translate(0rem, 0);
            transform: translate(0rem, 0);
  }
  to {
    -webkit-transform: translate(0rem, 3.5rem);
            transform: translate(0rem, 3.5rem);
  }
}

@keyframes topAnimation {
  from {
    -webkit-transform: translate(0rem, 0);
            transform: translate(0rem, 0);
  }
  to {
    -webkit-transform: translate(0rem, 3.5rem);
            transform: translate(0rem, 3.5rem);
  }
}
@-webkit-keyframes bottomAnimation {
  from {
    -webkit-transform: translate(-11.5rem, 0);
            transform: translate(-11.5rem, 0);
  }
  to {
    -webkit-transform: translate(0rem, 0);
            transform: translate(0rem, 0);
  }
}
@keyframes bottomAnimation {
  from {
    -webkit-transform: translate(-11.5rem, 0);
            transform: translate(-11.5rem, 0);
  }
  to {
    -webkit-transform: translate(0rem, 0);
            transform: translate(0rem, 0);
  }
}
button.btn {
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 700;
  border: 0;
  position: relative;
  letter-spacing: 0.15em;
  margin: 0 auto;
  padding: 1rem 2.5rem;
  background: transparent;
  outline: none;
  font-size: 28px;
  color: #111111;
  -webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.15s;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.15s;
}
button.btn::after, button.btn::before {
  border: 0;
  content: "";
  position: absolute;
  height: 40%;
  width: 10%;
  -webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: -2;
  border-radius: 50%;
}
button.btn::before {
  border: 0;
  background-color: #c92918;
  top: -0.75rem;
  left: 0.5rem;
  -webkit-animation: topAnimation 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s infinite alternate;
          animation: topAnimation 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s infinite alternate;
}
button.btn::after {
  background-color: #e74c3c;
  top: 3rem;
  left: 13rem;
  -webkit-animation: bottomAnimation 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s infinite alternate;
          animation: bottomAnimation 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s infinite alternate;
}
button.btn:hover {
  color: white;
}
button.btn:hover::before, button.btn:hover::after {
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: 0;
  -webkit-animation: none;
          animation: none;
}
button.btn:hover::after {
  left: 0rem;
}
button.btn:hover::before {
  top: 0.5rem;
  left: 0.35rem;
}

Button Đơn Giản Gradient Hover Effect

See the Pen Gradient Hover Effect by Chris Colvin (@chrismcolvin) on CodePen.

Button này được tác giả đổ màu css dạng gradient và sử dụng một số thuộc tính animation và box-shadow để tạo ra hiệu ứng đổ bóng và chuyển động cho nút button
Demo này tác giả dùng SCSS và mình đã convert SCSS của button này thành CSS như dưới đây

@import url("https://fonts.googleapis.com/css?family=Varela+Round");
body {
  margin: 0;
  background-color: lightskyblue;
}

button {
  width: 20vw;
  height: 6vw;
  position: absolute;
  left: 50vw;
  top: 50vh;
  transform: translate(-50%, -80%);
  font-family: 'Varela Round', sans-serif;
  font-size: 2vw;
  letter-spacing: 0.1em;
  color: #e8e8e8;
  border: none;
  border-radius: 10px;
  outline: none;
  background: linear-gradient(45deg, #d350db, teal, #d350db);
  background-size: 400% 400%;
  box-shadow: 1vw 1vw 0 lightcoral;
  cursor: pointer;
  transition: all 0.3s ease;
}
button:hover {
  animation: gradient 10s ease infinite;
  font-size: 2.05vw;
  box-shadow: 0.2vw 0.2vw 0 lightcoral;
}

@keyframes gradient {
  50% {
    background-position: 100% 0;
  }
}

Button Hover Effects của David Conner

See the Pen Collection of Button Hover Effects by David Conner (@davidicus) on CodePen.

Mẫu CSS cho hiệu ứng Hover của những button này như sau
Mẹo: Bấm nút để copy code

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,900);
* {
  box-sizing: inherit;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: .6s;
          transition-duration: .6s;
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
}

html,
body {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

body {
  background: #E1332D;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

.buttons {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  height: 100%;
  -webkit-box-pack: center;
          justify-content: center;
  text-align: center;
  width: 100%;
}

.container {
  -webkit-box-align: center;
          align-items: center;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
  padding: 1em;
  text-align: center;
}
@media (min-width: 600px) {
  .container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -webkit-box-pack: justify;
            justify-content: space-between;
  }
}

h1 {
  color: #fff;
  font-size: 1.25em;
  font-weight: 900;
  margin: 0 0 2em;
}
@media (min-width: 450px) {
  h1 {
    font-size: 1.75em;
  }
}
@media (min-width: 760px) {
  h1 {
    font-size: 3.25em;
  }
}
@media (min-width: 900px) {
  h1 {
    font-size: 5.25em;
    margin: 0 0 1em;
  }
}

p {
  color: #fff;
  font-size: 12px;
}
@media (min-width: 600px) {
  p {
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    top: 90%;
  }
}
@media (max-height: 500px) {
  p {
    left: 0;
    position: relative;
    top: 0;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
p a {
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid;
  color: #fff;
  line-height: 1.4;
  padding: .25em;
  text-decoration: none;
}
p a:hover {
  background: white;
  color: #E1332D;
}

.btn {
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  line-height: 45px;
  margin: 0 0 2em;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
}
@media (min-width: 600px) {
  .btn {
    margin: 0 1em 2em;
  }
}
.btn:hover {
  text-decoration: none;
}

.btn-1 {
  background: #e02c26;
  font-weight: 100;
}
.btn-1 svg {
  height: 45px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.btn-1 rect {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 422, 0;
  -webkit-transition: all 0.35s linear;
  transition: all 0.35s linear;
}

.btn-1:hover {
  background: rgba(225, 51, 45, 0);
  font-weight: 900;
  letter-spacing: 1px;
}
.btn-1:hover rect {
  stroke-width: 5;
  stroke-dasharray: 15, 310;
  stroke-dashoffset: 48;
  -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-2 {
  letter-spacing: 0;
}

.btn-2:hover,
.btn-2:active {
  letter-spacing: 5px;
}

.btn-2:after,
.btn-2:before {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, 0);
  bottom: 0px;
  content: " ";
  display: block;
  margin: 0 auto;
  position: relative;
  -webkit-transition: all 280ms ease-in-out;
  transition: all 280ms ease-in-out;
  width: 0;
}

.btn-2:hover:after,
.btn-2:hover:before {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-color: #fff;
  -webkit-transition: width 350ms ease-in-out;
  transition: width 350ms ease-in-out;
  width: 70%;
}

.btn-2:hover:before {
  bottom: auto;
  top: 0;
  width: 70%;
}

.btn-3 {
  background: #e3403a;
  border: 1px solid #da251f;
  box-shadow: 0px 2px 0 #d6251f, 2px 4px 6px #e02a24;
  font-weight: 900;
  letter-spacing: 1px;
  -webkit-transition: all 150ms linear;
  transition: all 150ms linear;
}

.btn-3:hover {
  background: #e02c26;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
  color: #ec817d;
  text-decoration: none;
  text-shadow: -1px -1px 0 #c2211c;
  -webkit-transition: all 250ms linear;
  transition: all 250ms linear;
}

.btn-4 {
  border: 1px solid;
  overflow: hidden;
  position: relative;
}
.btn-4 span {
  z-index: 20;
}
.btn-4:after {
  background: #fff;
  content: "";
  height: 155px;
  left: -75px;
  opacity: .2;
  position: absolute;
  top: -50px;
  -webkit-transform: rotate(35deg);
          transform: rotate(35deg);
  -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: -10;
}

.btn-4:hover:after {
  left: 120%;
  -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-5 {
  border: 0 solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, 0.5);
  outline-offset: 0px;
  text-shadow: none;
  -webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-5:hover {
  border: 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px #427388;
}

Simple hover effects with box-shadow của Giana

Đây là những hiệu ứng rê chuột vào button (hover button effects) sử dụng thuộc tính box-shadow trong CSS

See the Pen Button hover effects with box-shadow by Giana (@giana) on CodePen.


Chuyên Mục :
tháng 6 24, 2020

Mới Nhất Cùng Chuyên Mục

Bài Ngẫu Nhiên Cùng Chuyên Mục

Bình Luận

LaiXe.Xyz

Blog Lái Xe, chia sẻ thông tin về luật giao thông đường bộ, biển báo giao thông, thông tin về xe ô tô, thi bằng lái xe các hạng bằng A1, A2, B1, B2, C, D, E, F

Thi Thử Lái Xe B2 Mới Nhất

"Tiến hành giảng dạy bộ 600 câu hỏi vào tháng 06/2020 và áp dụng thi sát hạch vào tháng 10 năm 2020. Bộ đề 600 câu hỏi sẽ được phát hành dạng sách khoảng tháng 5/2020."

Blog Lái Xe

Giới Thiệu

Điều Khoản Sử Dụng

Chính Sách Bảo Mật

Sơ đồ website

Liên Kết: Spa Vung Tau | Phát Triển Bởi | LaiXe.Xyz
DMCA.com Protection Status