<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="hizli-menu container-fluid"> <div class="hizli-menu-ic container"> <div class="row"> <div class="page-header text-center"> <h1 class="h3"><strong>Content Animation Menu</strong></h1> </div> <div class="col-md-3 mbottom"> <a class="btn-group" href="#"> <div class="row"> <div class="col-md-4 col-xs-5"> <img src="http://www.imgim.com/etkinlik-ikon.png" alt=""> </div> <div class="col-md-8 col-xs-7"> <span>Haberler</span> </div> </div> </a> </div> <div class="col-md-3 mbottom"> <a class="btn-group" href="#"> <div class="row"> <div class="col-md-4 col-xs-5"> <img src="http://www.imgim.com/etkinlik-ikon.png" alt=""> </div> <div class="col-md-8 col-xs-7"> <span>Medyalar</span> </div> </div> </a> </div> <div class="col-md-3 mbottom"> <a class="btn-group" href="#"> <div class="row"> <div class="col-md-4 col-xs-5"> <img src="http://www.imgim.com/mevzuat-ikon.png" alt=""> </div> <div class="col-md-8 col-xs-7"> <span>Mevzuat</span> </div> </div> </a> </div> <div class="col-md-3 mbottom"> <a class="btn-group" href="#"> <div class="row"> <div class="col-md-4 col-xs-5"> <img src="http://www.imgim.com/etkinlik-ikon.png" alt=""> </div> <div class="col-md-8 col-xs-7"> <span>Etkinlikler</span> </div> </div> </a> </div> <div class="col-md-3 mbottom"> <a class="btn-group" href="#"> <div class="row"> <div class="col-md-4 col-xs-5"> <img src="http://www.imgim.com/haberler-ikon.png" alt=""> </div> <div class="col-md-8 col-xs-7"> <span>Haberler</span> </div> </div> </a> </div> <div class="col-md-3 mbottom"> <a class="btn-group" href="#"> <div class="row"> <div class="col-md-4 col-xs-5"> <img src="http://www.imgim.com/medya-ikon.png" alt=""> </div> <div class="col-md-8 col-xs-7"> <span>Medyalar</span> </div> </div> </a> </div> <div class="col-md-3 mbottom"> <a class="btn-group" href="#"> <div class="row"> <div class="col-md-4 col-xs-5"> <img src="http://www.imgim.com/mevzuat-ikon.png" alt=""> </div> <div class="col-md-8 col-xs-7"> <span>Mevzuat</span> </div> </div> </a> </div> <div class="col-md-3 mbottom"> <a class="btn-group" href="#"> <div class="row"> <div class="col-md-4 col-xs-5"> <img src="http://www.imgim.com/etkinlik-ikon.png" alt=""> </div> <div class="col-md-8 col-xs-7"> <span>Etkinlikler</span> </div> </div> </a> </div> <div class="col-md-3 mbottom"> <a class="btn-group" href="#"> <div class="row"> <div class="col-md-4 col-xs-5"> <img src="http://www.imgim.com/haberler-ikon.png" alt=""> </div> <div class="col-md-8 col-xs-7"> <span>Haberler</span> </div> </div> </a> </div> <div class="col-md-3 mbottom"> <a class="btn-group" href="#"> <div class="row"> <div class="col-md-4 col-xs-5"> <img src="http://www.imgim.com/medya-ikon.png" alt=""> </div> <div class="col-md-8 col-xs-7"> <span>Medyalar</span> </div> </div> </a> </div> <div class="col-md-3 mbottom"> <a class="btn-group" href="#"> <div class="row"> <div class="col-md-4 col-xs-5"> <img src="http://www.imgim.com/mevzuat-ikon.png" alt=""> </div> <div class="col-md-8 col-xs-7"> <span>Mevzuat</span> </div> </div> </a> </div> <div class="col-md-3 mbottom"> <a class="btn-group" href="#"> <div class="row"> <div class="col-md-4 col-xs-5"> <img src="http://www.imgim.com/etkinlik-ikon.png" alt=""> </div> <div class="col-md-8 col-xs-7"> <span>Etkinlikler</span> </div> </div> </a> </div> <div class="col-md-3 mbottom"> <a class="btn-group" href="#"> <div class="row"> <div class="col-md-4 col-xs-5"> <img src="http://www.imgim.com/haberler-ikon.png" alt=""> </div> <div class="col-md-8 col-xs-7"> <span>Haberler</span> </div> </div> </a> </div> <div class="col-md-3 mbottom"> <a class="btn-group" href="#"> <div class="row"> <div class="col-md-4 col-xs-5"> <img src="http://www.imgim.com/medya-ikon.png" alt=""> </div> <div class="col-md-8 col-xs-7"> <span>Medyalar</span> </div> </div> </a> </div> <div class="col-md-3 mbottom"> <a class="btn-group" href="#"> <div class="row"> <div class="col-md-4 col-xs-5"> <img src="http://www.imgim.com/mevzuat-ikon.png" alt=""> </div> <div class="col-md-8 col-xs-7"> <span>Mevzuat</span> </div> </div> </a> </div> <div class="col-md-3 mbottom"> <a class="btn-group" href="#"> <div class="row"> <div class="col-md-4 col-xs-5"> <img src="http://www.imgim.com/etkinlik-ikon.png" alt=""> </div> <div class="col-md-8 col-xs-7"> <span>Etkinlikler</span> </div> </div> </a> </div> </div> </div> </div>

.hizli-menu { padding-bottom: 50px; } .hizli-menu .hizli-menu-ic {} .hizli-menu .hizli-menu-ic .btn-group { background: #f2565a; color: #fff; font-size: 18px; display: flex; width: 100%; align-items: center; height: 75px; padding: 26px 36px 26px 26px; margin: 0; position: relative; border-radius: 5px; } .hizli-menu .hizli-menu-ic .btn-group:hover { background: #333333; } .hizli-menu .hizli-menu-ic .btn-group:After { position: absolute; display: block; content: ""; width: 76px; height: 8px; background: #333; bottom: -8px; left: 10px; margin: auto; transition: cubic-bezier(0, 0.71, 0, 1.07) .7s; } .hizli-menu .hizli-menu-ic .btn-group:hover:After { background: #f2565a; transform: translate(0,0px); height: 91px; border-radius: 8px; } .hizli-menu .hizli-menu-ic .btn-group img {margin-right:12px;height: 38px;position: absolute;z-index: 777;} .hizli-menu .hizli-menu-ic .btn-group span { margin: 5px; display: block; font-weight: 800; padding-left: 15px; } .mbottom {margin-bottom:30px;}