HTML
<a class="btn_1" href="#">Discover more</a>
CSS
btn_1 {display: inline-block;padding: 13px 30px;border-radius: 10px;font-size: 16px;color: #fff !important;text-transform: capitalize;-webkit-transition: 0.5s;transition: 0.5s;background-color: #fe5c24;font-weight: 500;margin:5px;}.btn_1:hover {text-decoration: none;background-color: #007bff;}
HTML
<a class="btn_2" href="#">Discover more</a>
CSS
.btn_2 {
display: inline-block;
padding: 13px 30px;
border-radius: 10px;
font-size: 16px;
color: #fff !important;
text-transform: capitalize;
-webkit-transition: 0.5s;
transition: 0.5s;
background-color: #007bff;
font-weight: 500;
margin:5px;
}
.btn_2:hover {text-decoration: none;background-color: #fe5c24;}
HTML
<a class="btn_3" href="#">Discover more</a>
CSS
.btn_3 {
display: inline-block;
padding: 13px 30px;
border-radius: 10px;
font-size: 16px;
color: #fff !important;
text-transform: capitalize;
-webkit-transition: 0.5s;
transition: 0.5s;
background: linear-gradient(270deg, #2981E9 0%, #3C48DD 100%);
font-weight: 500;
margin:5px;
}
.btn_3:hover {
text-decoration: none;
background: linear-gradient(270deg, #3C48DD 0%, #2981E9 100%);
}
0 Комментарии