<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 ---------->
<div id="container">
<h2 class="ayush">AYUSH THAKUR</h2>
<div class="button-1">
<div class="eff-1"></div>
<a href="#"> Read more </a>
</div>
<div class="button-4">
<div class="eff-4"></div>
<a href="#"> Read more </a>
</div>
<div class="button-2">
<div class="eff-2"></div>
<a href="#"> Read more </a>
</div>
<div class="button-3">
<div class="eff-3"></div>
<a href="#"> Read more </a>
</div>
<div class="button-5">
<div class="eff-5"></div>
<a href="#"> Read more </a>
</div>
<div class="button-6">
<div class="eff-6"></div>
<a href="#"> Read more </a>
</div>
<div class="button-7">
<div class="eff-7"></div>
<a href="#"> Read more </a>
</div>
<div class="button-8">
<div class="eff-8"></div>
<a href="#"> Read more </a>
</div>
</div>
<footer>
</footer>
*{margin:0;padding:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
body{background-image: -ms-linear-gradient(top right, rgba(255,183,107,1) 0%, rgba(255,167,61,1) 50%, rgba(255,124,0,1) 51%, rgba(255,127,4,1) 100%);
background-image: -moz-linear-gradient(top right, rgba(255,183,107,1) 0%, rgba(255,167,61,1) 50%, rgba(255,124,0,1) 51%, rgba(255,127,4,1) 100%);
background-image: -o-linear-gradient(top right, rgba(255,183,107,1) 0%, rgba(255,167,61,1) 50%, rgba(255,124,0,1) 51%, rgba(255,127,4,1) 100%);
background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, rgba(255,183,107,1)), color-stop(50, rgba(255,167,61,1)), color-stop(51, rgba(255,124,0,1)), color-stop(100, rgba(255,127,4,1)));
background-image: -webkit-linear-gradient(top right, rgba(255,183,107,1) 0%, rgba(255,167,61,1) 50%, rgba(255,124,0,1) 51%, rgba(255,127,4,1) 100%);
background-image: linear-gradient(to bottom left, rgba(255,183,107,1) 0%, rgba(255,167,61,1) 50%, rgba(255,124,0,1) 51%, rgba(255,127,4,1) 100%);background-repeat: no-repeat;}
#container{
width:715px;
height:230px;
margin:50px auto;
}
.ayush {
color: red;
text-align: center;
width: 100%;
font-size: 35px;
position: relative;
top: -39px;
left: -52px;
text-shadow: 2px 2px 1px yellow;
}
.button-1{
width:140px;
height:50px;
border:2px solid #34495e;
float:left;
text-align:center;
cursor:pointer;
position:relative;
box-sizing:border-box;
overflow:hidden;
margin:0 0 40px 0;
}
.button-1 a{
font-family:arial;
font-size:16px;
color:#34495e;
text-decoration:none;
line-height:50px;
transition:all .5s ease;
z-index:2;
position:relative;
}
.eff-1{
width:140px;
height:50px;
top:-2px;
right:-140px;
background:#34495e;
position:absolute;
transition:all .5s ease;
z-index:1;
}
.button-1:hover .eff-1{
right:0;
}
.button-1:hover a{
color:#fff;
}
.button-2{
width:140px;
height:50px;
border:2px solid #34495e;
float:left;
text-align:center;
cursor:pointer;
position:relative;
box-sizing:border-box;
overflow:hidden;
margin:0 0 40px 50px;
}
.button-2 a{
font-family:arial;
font-size:16px;
color:#34495e;
text-decoration:none;
line-height:50px;
transition:all .5s ease;
z-index:2;
position:relative;
}
.eff-2{
width:140px;
height:50px;
top:-50px;
background:#34495e;
position:absolute;
transition:all .5s ease;
z-index:1;
}
.button-2:hover .eff-2{
top:0;
}
.button-2:hover a{
color:#fff;
}
.button-3{
width:140px;
height:50px;
border:2px solid #34495e;
float:left;
text-align:center;
cursor:pointer;
position:relative;
box-sizing:border-box;
overflow:hidden;
margin:0 0 40px 50px;
}
.button-3 a{
font-family:arial;
font-size:16px;
color:#34495e;
text-decoration:none;
line-height:50px;
transition:all .5s ease;
z-index:2;
position:relative;
}
.eff-3{
width:140px;
height:50px;
bottom:-50px;
background:#34495e;
position:absolute;
transition:all .5s ease;
z-index:1;
}
.button-3:hover .eff-3{
bottom:0;
}
.button-3:hover a{
color:#fff;
}
.button-4{
width:140px;
height:50px;
border:2px solid #34495e;
float:left;
text-align:center;
cursor:pointer;
position:relative;
box-sizing:border-box;
overflow:hidden;
margin:0 0 40px 50px;
}
.button-4 a{
font-family:arial;
font-size:16px;
color:#34495e;
text-decoration:none;
line-height:50px;
transition:all .5s ease;
z-index:2;
position:relative;
}
.eff-4{
width:140px;
height:50px;
left:-140px;
background:#34495e;
position:absolute;
transition:all .5s ease;
z-index:1;
}
.button-4:hover .eff-4{
left:0;
}
.button-4:hover a{
color:#fff;
}
.button-5{
width:140px;
height:50px;
border:2px solid #34495e;
float:left;
text-align:center;
cursor:pointer;
position:relative;
box-sizing:border-box;
overflow:hidden;
margin:0 0 40px 0;
}
.button-5 a{
font-family:arial;
font-size:16px;
color:#34495e;
text-decoration:none;
line-height:50px;
transition:all .5s ease;
z-index:2;
position:relative;
}
.eff-5{
width:140px;
height:50px;
left:-140px;
top:-50px;
background:#34495e;
position:absolute;
transition:all .5s ease;
z-index:1;
}
.button-5:hover .eff-5{
left:0;top:0;
}
.button-5:hover a{
color:#fff;
}
.button-6{
width:140px;
height:50px;
border:2px solid #34495e;
float:left;
text-align:center;
cursor:pointer;
position:relative;
box-sizing:border-box;
overflow:hidden;
margin:0 0 40px 50px;
}
.button-6 a{
font-family:arial;
font-size:16px;
color:#34495e;
text-decoration:none;
line-height:50px;
transition:all .5s ease;
z-index:2;
position:relative;
}
.eff-6{
width:140px;
height:50px;
right:-140px;
bottom:-50px;
background:#34495e;
position:absolute;
transition:all .5s ease;
z-index:1;
}
.button-6:hover .eff-6{
right:0;bottom:0;
}
.button-6:hover a{
color:#fff;
}
.button-7{
width:140px;
height:50px;
border:2px solid #34495e;
float:left;
text-align:center;
cursor:pointer;
position:relative;
box-sizing:border-box;
overflow:hidden;
margin:0 0 40px 50px;
}
.button-7 a{
font-family:arial;
font-size:16px;
color:#34495e;
text-decoration:none;
line-height:50px;
transition:all .5s ease;
z-index:2;
position:relative;
}
.eff-7{
width:140px;
height:50px;
border:0px solid #34495e;
position:absolute;
transition:all .5s ease;
z-index:1;
box-sizing:border-box;
}
.button-7:hover .eff-7{
border:70px solid #34495e;
}
.button-7:hover a{
color:#fff;
}
.button-8{
width:140px;
height:50px;
border:2px solid #34495e;
float:left;
text-align:center;
cursor:pointer;
position:relative;
box-sizing:border-box;
overflow:hidden;
margin:0 0 40px 50px;
}
.button-8 a{
font-family:arial;
font-size:16px;
color:#fff;
text-decoration:none;
line-height:50px;
transition:all .5s ease;
z-index:2;
position:relative;
}
.eff-8{
width:140px;
height:50px;
border:70px solid #34495e;
position:absolute;
transition:all .5s ease;
z-index:1;
box-sizing:border-box;
}
.button-8:hover .eff-8{
border:0px solid #34495e;
}
.button-8:hover a{
color:#34495e;
}
h1{
font-family: 'Oswald', sans-serif;
font-weight:normal;
font-size:24px;
color:#34495e;
text-align:center;
margin:0 auto 40px 0;
}
h1:first-letter{
color:#e74c3c;
border-bottom:1px solid #e74c3c;
}
footer{
position:absolute;
width:100%;
height:30px;
border-top:1px solid #34495e;
bottom:0;
display:none;
}
footer h1{
font-family: 'Oswald', sans-serif;
font-weight:normal;
font-size:14px;
color:#34495e;
text-align:left;
margin-left:5%;
}
footer a{
font-family: 'Oswald', sans-serif;
font-weight:normal;
font-size:14px;
color:#34495e;
}
