Bootstrap Snippet Round Button using HTML CSS

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
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Round Button"
Bootstrap 4.1.1 Snippet by saikiran053

Related: See More

Questions / Comments:

"Round Button" Bootstrap 4.1.1 Snippet by saikiran053

Related: See More

Questions / Comments:

"Round Button"
Bootstrap 4.1.1 Snippet by saikiran053