🐬 Wapmaster share code hay: Tạo hiệu ứng button chuyển màu bằng CSS3

Việc hiểu biết CSS3 sẽ giúp ích rất nhiều cho các bạn tìm được việc làm ưng ý sau này. Vì thế hôm nay mình xin chia sẻ với các bạn một hiệu ứng đơn giản mà CSS3 mang lại cho chúng ta
RGB Named HUE Saturation Lightness Top Flat Flat

<a class="button" id="rgb">RGB</a>
<a class="button" id="namedcolors">Named</a>
<a class="button" id="hue">HUE</a>
<a class="button" id="saturation">Saturation</a>
<a class="button" id="lightness">Lightness</a>
<a class="button" id="topflat">Top Flat</a>
<a class="button" id="bottomflat"> Flat</a>
<style>
@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans);
body {
 
 text-align: center;
 }
* {margin: 0; padding: 0;}

/* Thuộc tính chung cho các nút bấm */
.button {
 /*
  Chúng ta sẽ tạo một hiệu ứng màu đen trắng kiểu gradient bằng cách giảm Opacity xuống còn 60%.
  Với hiệu ứng gradient này, chúng ta sẽ kết hợp với 'background-color' để tạo ra các hiệu ứng chuyển động màu sắc sau này.
 */
 background-image: linear-gradient(
  rgba(255,255,255,0.6), 
  rgba(0,0,0,0.6)
 );
 
 display: inline-block;
 height: 50px; width: 100px;
 line-height: 50px; 
 margin: 5px;
 
 color: white;
 font-size: 12px;
 font-weight: bold;
 
 border-radius: 5px;
 box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

#rgb {
 background-color: #FF0; /* Màu vàng */
 animation: rgb 3s infinite alternate;
}
@keyframes rgb {
 /* 0% sẽ có màu mặc định là màu vàng */
 50% {background-color: #06F; /* Màu xanh*/ }
 100% {background-color: #F00; /* Màu đỏ */}
}

#namedcolors {
 background-color: red;
 animation: namedcolors 0.3s infinite alternate;
}
@keyframes namedcolors {
 100% {background-color: orange;}
}

#hue {
 background-color: hsl(0, 100%, 50%); /* Màu đỏ */
 animation: hue 3s infinite alternate;
}
@keyframes hue {
 /* hue sẽ chuyển màu từ giá trị 0 -> 360 */
 20% {background-color: hsl(72, 100%, 50%);}
 40% {background-color: hsl(144, 100%, 50%);}
 60% {background-color: hsl(216, 100%, 50%);}
 80% {background-color: hsl(288, 100%, 50%);}
 100% {background-color: hsl(360, 100%, 50%);}
}

#saturation {
 /*0% = màu xám */
 background-color: hsl(0, 0%, 50%); 
 animation: saturation 3s infinite alternate;
}
@keyframes saturation {
 /*100% = màu đỏ */
 100% {background-color: hsl(0, 100%, 50%); }
}

#lightness {
 /*0%  = màu đen */
 background-color: hsl(0, 100%, 0%); 
 animation: lightness 3s infinite alternate;
}
@keyframes lightness {
 /*50%  = màu đỏ */
 50% {background-color: hsl(0, 100%, 50%); }
 /*100% = màu trắng */
 100% {background-color: hsl(0, 100%, 100%); }
}

#topflat {
 color: #999;
 background-color: white;
 background-image: linear-gradient(rgba(0, 0, 0, 0), black);
 animation: topflat 3s infinite alternate;
}
@keyframes topflat {
 100% {background-color: black;}
}

#bottomflat {
 color: #999;
 background-color: black;
 background-image: linear-gradient(white, rgba(255, 255, 255, 0));
 animation: bottomflat 3s infinite alternate;
}
@keyframes bottomflat {
 100% {background-color: white;}
}
</style>

DAT007 KÍNH CHÚC CÁC BẠN THÀNH CÔNG TRONG CÔNG VIỆC

Tạo hiệu ứng button chuyển màu bằng CSS3