<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Button Ripple Effect </title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body class="index">
<div class="container-fluid margin">
<button href="https://www.behance.net/sakiran" target="_blank" class="themeBtn">Saikiran Netha's</button>
</div>
<div class="container-fluid margin">
<a class="themeBtn2">Saikiran Netha's</a>
</div>
<div class="container-fluid margin">
<a href="https://dribbble.com/saikiran053" target="_blank" class="themeBtn3">Follow @ Dribble</a>
</div>
<div class="container-fluid margin">
<a href="https://www.behance.net/sakiran" target="_blank" class="themeBtn4">Follow @ Behance</a>
</div>
</body>
</html>
.margin{
margin-top:20px;
margin-bottom:20px;
}
.themeBtn {
background: #ff5c00;
color: #ffffff !important;
display: inline-block;
font-size: 15px;
font-weight: 500;
height: 50px;
line-height: 0.8;
padding: 18px 30px;
text-transform: capitalize;
border-radius: 1px;
letter-spacing: 0.5px;
border:0px !important;
cursor:pointer;
border-radius:100px;
}
a:hover{
color: #ffffff;
text-decoration:none;
}
.themeBtn:hover {
background: rgb(255, 92, 0);
color: #ffffff;
box-shadow: 0 10px 25px -2px rgba(255, 92, 0, 0.6);
}
.themeBtn2 {
background: #7600ff;
color: #ffffff !important;
display: inline-block;
font-size: 15px;
font-weight: 500;
height: 50px;
line-height: 0.8;
padding: 18px 30px;
text-transform: capitalize;
border-radius: 1px;
letter-spacing: 0.5px;
border:0px !important;
cursor:pointer;
border-radius:100px;
}
.themeBtn2:hover {
background: rgb(118, 0, 255);
color: #ffffff;
box-shadow: 0 10px 25px -2px rgba(118, 0, 255, 0.6);
}
.themeBtn3 {
background: #ff2e4d;
color: #ffffff !important;
display: inline-block;
font-size: 15px;
font-weight: 500;
height: 50px;
line-height: 0.8;
padding: 18px 30px;
text-transform: capitalize;
border-radius: 1px;
letter-spacing: 0.5px;
border:0px !important;
cursor:pointer;
border-radius:100px;
}
.themeBtn3:hover {
background: rgb(255, 46, 77);
color: #ffffff;
box-shadow: 0 10px 25px -2px rgba(255, 46, 77, 0.6);
}
.themeBtn4 {
background: #006eff;
color: #ffffff !important;
display: inline-block;
font-size: 15px;
font-weight: 500;
height: 50px;
line-height: 0.8;
padding: 18px 30px;
text-transform: capitalize;
border-radius: 1px;
letter-spacing: 0.5px;
border:0px !important;
cursor:pointer;
border-radius:100px;
}
.themeBtn4:hover {
background: rgb(0, 110, 255);
color: #ffffff;
box-shadow: 0 10px 25px -2px rgba(0, 110, 255, 0.6);
}
