Description  

Hello, friends in this blog I have shown that how you can get the RGB effect on Button in HTML (Hypertext Markup Language) using Simple CSS (Cascading Style Sheets) code , RGB effect looks so cool and it helps to build our website more attractive and this RGB effect enhances your user retention and user experience on your site  so now lets create a simple RGB button with using some CSS


) RGB BUTTON HTML CODE (WHITE BG)

Click here to download code for White BG  

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html>
<head>                            <!-- WHITE COLOR LOOK -->
	<title>RGB BUTTON</title>


	  
<style>


button {
 
       color: white;
      border: none;
  background: gray;
     padding: 15px;
   font-size: 14px;
  text-align: center;
      cursor: pointer;
      border-radius: 20px;

     box-shadow: 
                  0 0 20px #bdb;
  
}



button:hover {
 
   transform: scale(1.05);
      border: none;
  background: gray;
     padding: 15px;
   font-size: 14px;
  text-align: center;
      cursor: pointer;
      border-radius: 20px;
 

   background: linear-gradient(110deg,  #ff2400, #e81d1d, 
   	#e8b71d, #e3e81d, #1de840, #2b1de8,#1ddde8, #dd00f3, #dd00f3);
  
  background-size: 1800% 1800%;

   -webkit-animation: rainbow 14s ease infinite;
        -z-animation: rainbow 14s ease infinite;
        -o-animation: rainbow 14s ease infinite;
           animation: rainbow 14s ease infinite;

  }
 

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
  100%{background-position:0% 82%}  

}



</style>
</head>
<body bgcolor="white">

<center>
	
<a href="#">  <button id="btn1"> SUBSCRIBE TO </button> </a>
<br>
<br>
<a href="#">  <button id="btn2"> EPIC Technical Tricks </button> </a>


</center>


</body>
</html>
 


) Output (White BG)

  ) RGB BUTTON HTML CODE (Black BG)

Click here to download code for Black BG 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
  
<style>


button {
 
       color: white;
      border: none;
  background: black;
     padding: 15px;
   font-size: 14px;
  text-align: center;
      cursor: pointer;
      border-radius: 20px;

     box-shadow:  0 0 5px #fff,
                  0 0 50px #651fff;
  
}



button:hover {
 
   transform: scale(1.05);
      border: none;
  background: black;
     padding: 15px;
   font-size: 14px;
  text-align: center;
      cursor: pointer;
      border-radius: 20px;
 

   background: linear-gradient(110deg,  #ff2400, #e81d1d, 
   	#e8b71d, #e3e81d, #1de840, #2b1de8,#1ddde8, #dd00f3, #dd00f3);
  
  background-size: 1800% 1800%;

   -webkit-animation: rainbow 14s ease infinite;
        -z-animation: rainbow 14s ease infinite;
        -o-animation: rainbow 14s ease infinite;
           animation: rainbow 14s ease infinite;

  }





@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
  100%{background-position:0% 82%}  

}



</style>

  <!-- By EPIC TECHNICAL TRICKS -->

<body bgcolor="black" >

<br><br><br><br><br>

<center>
	
<a href="#">  <button id="btn1"> BUTTON 1 </button> </a>
<br>
<br>
<a href="#">  <button id="btn2"> BUTTON 2 </button> </a>


</center>

</body>


) Output (Black BG)


) VIdeo Tutorial 

 


 

I hope it's helpful for you 

Thanks for visiting ❤