Gradient-backgrounds Buttons
Html code is :-
<button class="btn" type="button">Button</button>
change according to button CSS.
1.
.btn{
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
color: white;
transition: 2s;
}
.btn:hover{
background-color: #8EC5FC;
background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}
2.
.btn1{
background-image: radial-gradient( circle 610px at 5.2% 51.6%, rgba(5,8,114,1) 0%,
rgba(7,3,53,1) 97.5% );
color : white;
padding: 5px;
border-radius: 5px;
border-color: white;
transition: 1s;
}
.btn1:hover{
background-image: radial-gradient( circle 976px at 51.2% 51%, rgba(11,27,103,1) 0%,
rgba(16,66,157,1) 0%, rgba(11,27,103,1) 17.3%, rgba(11,27,103,1) 58.8%,
rgba(11,27,103,1) 71.4%, rgba(16,66,157,1) 100.2%, rgba(187,187,187,1) 100.2% );
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
}
3.
.btn2{
background-image: radial-gradient( circle farthest-corner at 7.2% 13.6%,
rgba(37,249,245,1) 0%, rgba(8,70,218,1) 90% );
padding: 5px;
border-radius: 5px;
border-color: white;
transition: 1s;
color:rgba(7,3,53,1);
padding-left: 10px;
padding-right: 10px;
}
.btn2:hover{
background-image: radial-gradient( circle 674px at 18.3% 77%,
rgba(139,186,244,1) 3.4%, rgba(15,51,92,1) 56.6% );
}
4.
.btn3{
background-image: linear-gradient( 180.5deg, rgba(46,255,171,1) 12.3%,
rgba(252,251,222,0.46) 92% );
padding: 10px 20px;
border-radius: 5px;
border-color: white;
transition: 1s;
color:rgba(7,3,53,1);
}
.btn3:hover{
background-image: linear-gradient( 92.7deg, rgba(245,212,212,1) 8.5%,
rgba(252,251,224,1) 90.2% );
border-radius:8px ;
}