<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 ---------->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button's Effect</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body style="background-color:yellow;width:100%;height:100vh;font-variant:Small-caps;">
<div class="col-lg-offset-1 col-lg-10">
<h3 style="font-weight:bold;font-size:60px;">New Button Layout And Effect , CSS Button Hover Effect</h3>
</div>
<div class="col-lg-offset-1 col-lg-11 col-md-12 col-sm-12 col-xs-12" style="margin-top:10%;">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<button id="button1">3D Button</button>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<button class="shadow-lg" id="button2">Side Swing</button>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<button id="button3"><div class="underbtn"><div style="color:black">Slide Btn</div></div>
</button>
</div>
</div>
<div class="col-lg-offset-1 col-lg-11 col-md-12 col-sm-12 col-xs-12" style="margin-top:6%;">
<div class="col-lg-4 col-md-4 col-sm-4" style="display:flex;">
<button id="button4"></button>
<button id="button4a">Cut Button</button>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<button id="button5">Sacpe Btn</button>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<button id="button6">Rotate Btn</button>
</div>
</div>
</body>
</html>
#button1{
width:250px;
height:50px;
font-size:18px;
font-variant:small-caps;
box-shadow:0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #adadad, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
background-color:#fff;
outline:none;
border:none;
border-radius:50px;
color:black;
font-weight:bold;
transition-duration: 0.5s;
transition-property: transform;
}
#button1:hover{
transform: scale(0.9);
color:black;
}
#button2{
width:250px;
height:50px;
font-size:18px;
font-variant:small-caps;
outline:none;
border:none;
background-image: linear-gradient(to left, #13fdfd, #00ddff, #00b8ff, #008cff, #0652ff);
color:white;
font-weight:bold;
border-radius:0px 0px 0px 1000px;
box-shadow: 0 10px 10px -5px black;
transition:0.5s;
}
#button2:hover{
border-radius:0px 0px 1000px 0px;
background-image: linear-gradient(to left, #3213fd, #b200b6, #c9007e, #c04260, #a86960);
}
#button3{
width:250px;
height:50px;
font-size:18px;
font-variant:small-caps;
outline:none;
border:none;
transition:1s;
background-image: linear-gradient(to right, #22ebf4, #43e6d5, #65e0b6, #83d899, #9ecf7f);
color:white;
border-radius:0px 1000px 1000px 0px;
box-shadow: 5px 5px 20px black;
}
.underbtn{
width:40px;
height:40px;
background-color:white;
border-radius:360px;
transition:2s;
}
.underbtn:hover{
width:230px;
height:38px;
border-radius:0px 1000px 1000px 0px;
display:visible;
}
.underbtn>div {
visibility: hidden;
}
.underbtn:hover>div {
visibility: visible;
}
#button4{
width:50px;
height:50px;
font-size:18px;
font-variant:small-caps;
outline:none;
border:none;
transition:1s;
background-color:black;
clip-path: polygon(0 0, 100% 0%, 60% 100%, 0 100%);
}
#button4a{
width:200px;
height:50px;
font-size:18px;
font-variant:small-caps;
outline:none;
border:none;
transition:1s;
border-radius:0px 100px 100px 0px;
background-color:white;
color: #404040 !important;
font-weight: 700 !important;
letter-spacing: 3px;
background: none;
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.3s ease 0s;
}
#button5{
width:250px;
height:50px;
font-size:18px;
font-variant:small-caps;
outline:none;
border:none;
transition:1s;
clip-path: polygon(0 0, 100% 0%, 70% 100%, 0 40%);
background-color:#F6540C;
color:white;
text-align:center-right;
}
#button5:hover{
background-color:cyan;
color:black;
border-radius:360%;
}
#button6{
width:250px;
height:50px;
font-size:18px;
font-variant:small-caps;
outline:none;
transition:2s;
box-shadow: 11px 16px 19px -2px rgba(0,0,0,0.75);
background-color:white;
border:none;
border-radius:100px 0px 100px 0px;
}
#button6:hover{
border-radius:0px 100px 0px 100px;
background-color:#8971A8;
color:white;
}
