content logo

Bootstrap Tabs:

Bootstrap Tabs with Green Box Animation and Fading Effect

The animation effect is a beautiful design that has a great impact on attracting the audience. So, if you use this kind of design for your website, you can make sure that many people will come to your website and attract to that. In this post, we have a code that included some Beautiful Animating Tabs with green color. These Bootstrap Tabs are designed in a columnar way and each is under the other one. This makes your website so beautiful and unique. Because as you move to each tab, the animating tab will appear. These Animating Tabs are green and look so nice.

Another remarkable characteristic of this awesome bootstrap is the Tabs Fading that is included here. As we move to each tab, the animating design will appear in a fading way. In means that at the first, we cannot see that, and after moving to it, we can see the animating tab. This makes a huge contrast to other websites with a simple design. All features that we mentioned above, are included in the bellow code that we have provided for you. You can download and use these Green Box Animation Tabs easily and attract a large number of audiences.

#

Bootstrap Tabs

#

Green Box Animation Tabs

#

Beautiful Animating Tabs

#

Animating Tabs

#

Tabs Fading

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <div class="tab" role="tabpanel">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab">Section 1</a></li>
                    <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Section 2</a></li>
                    <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab">Section 3</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content tabs">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis
                            mi varius.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <h3>Section 2</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis
                            mi varius.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis
                            mi varius.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body {
    margin: 20px;
}
a:hover,
a:focus {
    text-decoration: none;
    outline: none;
}
.tab {
    font-family: "Source Sans Pro", sans-serif;
    padding: 15px;
}
.tab .nav-tabs {
    margin: 0;
    border: none;
}
.tab .nav-tabs li {
    width: 33.33%;
}
.tab .nav-tabs li a {
    color: #555;
    background: linear-gradient(#fcfcfc, #f5f5f5);
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    padding: 8px 25px 10px;
    margin: 0 2px 3px 0;
    border: none;
    border-radius: 0;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease 0s;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover,
.tab .nav-tabs li.active a:hover {
    color: #0da57d;
    background: linear-gradient(#fcfcfc, #f5f5f5, #fcfcfc);
    border: none;
}
.tab .nav-tabs li a:before {
    content: "";
    background: linear-gradient(#1dd1a1 50%, #0da57d 50%);
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all 0.3s ease-out 0s;
}
.tab .nav-tabs li.active a:before,
.tab .nav-tabs li a:hover:before {
    opacity: 1;
    transform: translateY(-21.5px) scale(0.3);
}
.tab .tab-content {
    color: #555;
    background: linear-gradient(#fcfcfc, #f5f5f5, #fcfcfc);
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 25px;
    padding: 20px;
    position: relative;
}
@media only screen and (max-width: 479px) {
    .tab .nav-tabs li {
        width: 100%;
        text-align: center;
    }
    .tab .nav-tabs li a {
        margin: 0 0 15px;
    }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
body {
    margin: 20px;
}
a:hover,
a:focus {
    text-decoration: none;
    outline: none;
}
.tab {
    font-family: "Source Sans Pro", sans-serif;
    padding: 15px;
}
.tab .nav-tabs {
    margin: 0;
    border: none;
}
.tab .nav-tabs li {
    width: 33.33%;
}
.tab .nav-tabs li a {
    color: #555;
    background: linear-gradient(#fcfcfc, #f5f5f5);
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    padding: 8px 25px 10px;
    margin: 0 2px 3px 0;
    border: none;
    border-radius: 0;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease 0s;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover,
.tab .nav-tabs li.active a:hover {
    color: #0da57d;
    background: linear-gradient(#fcfcfc, #f5f5f5, #fcfcfc);
    border: none;
}
.tab .nav-tabs li a:before {
    content: "";
    background: linear-gradient(#1dd1a1 50%, #0da57d 50%);
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all 0.3s ease-out 0s;
}
.tab .nav-tabs li.active a:before,
.tab .nav-tabs li a:hover:before {
    opacity: 1;
    transform: translateY(-21.5px) scale(0.3);
}
.tab .tab-content {
    color: #555;
    background: linear-gradient(#fcfcfc, #f5f5f5, #fcfcfc);
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 25px;
    padding: 20px;
    position: relative;
}
@media only screen and (max-width: 479px) {
    .tab .nav-tabs li {
        width: 100%;
        text-align: center;
    }
    .tab .nav-tabs li a {
        margin: 0 0 15px;
    }
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <div class="tab" role="tabpanel">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab">Section 1</a></li>
                    <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Section 2</a></li>
                    <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab">Section 3</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content tabs">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis
                            mi varius.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <h3>Section 2</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis
                            mi varius.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis
                            mi varius.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview