content logo

Bootstrap Buttons:

Moving and Static Line Borders for Bootstrap Buttons

Style is basically used to differentiate the important actions. In other words, the flashier and more stylish a button looks, the more likely it is for the users to press it. so, you should use this to your advantage. Create more fancy buttons for more important actions to alter them from the less important ones. This will help guide the users greatly which is almost vital when there are multitude of choices available. Usually, you can have one very important button, several buttons with medium importance, and tons of other buttons with low emphasis. The design you choose for each of these buttons is key in determining which is which.

In this code, we are introducing a Bootstrap button with line border. The border helps to build some sort of a contrast which adds a certain effect to the button. adding borders to a button is similar to making a word bold in a text. It shows that this button is highlighted for a reason and is more important; therefore, the users are more eager to click on them. The button we have here is a Bootstrap button hover effect template. The Bootstrap line effect is displayed once in hover mode. There is also a version with static line available which is more basic. You can use this beautiful orange button to make your website look a lot nicer than it is right now.

#

Bootsrtap Line Effect

#

Bootsrap Button Hover Effect

#

Orange Button

#

Button with Line Border

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-sm-6 text-center">
            <a href="#" class="btn btn-lg active">Button</a>
        </div>
        <div class="col-sm-6 text-center" >
            <a href="#" class="btn btn-lg">Button</a>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body{
    margin-top: 100px !important;
}
.btn {
    background-color: #F48224;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    position: relative;
    border-radius: 0 !important;
    border: none;
    transition:all 0.3s ease 0s;
}
.btn:hover,
.btn.active:hover{
    color: #ffffff;
}
.btn:before{
    content: "";
    position: absolute;
    top: -7px;
    left: 0;
    background-color:#2E0014;
    width: 30%;
    height: 4px;
    transition:all 0.3s ease 0s;
}
.btn:after{
    content: "";
    position: absolute;
    bottom: -7px;
    right: 0;
    background-color:#2E0014;
    width: 30%;
    height: 4px;
    transition:all 0.3s ease 0s;
}
.btn:hover:before,
.btn:hover:after,
.btn.active:before,
.btn.active:after{
    width: 100%;
}

@media screen and (max-width: 575px){
    .btn{
        margin-bottom: 50px !important;
    }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body{
    margin-top: 100px !important;
}
.btn {
    background-color: #F48224;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    position: relative;
    border-radius: 0 !important;
    border: none;
    transition:all 0.3s ease 0s;
}
.btn:hover,
.btn.active:hover{
    color: #ffffff;
}
.btn:before{
    content: "";
    position: absolute;
    top: -7px;
    left: 0;
    background-color:#2E0014;
    width: 30%;
    height: 4px;
    transition:all 0.3s ease 0s;
}
.btn:after{
    content: "";
    position: absolute;
    bottom: -7px;
    right: 0;
    background-color:#2E0014;
    width: 30%;
    height: 4px;
    transition:all 0.3s ease 0s;
}
.btn:hover:before,
.btn:hover:after,
.btn.active:before,
.btn.active:after{
    width: 100%;
}

@media screen and (max-width: 575px){
    .btn{
        margin-bottom: 50px !important;
    }
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-6 text-center">
            <a href="#" class="btn btn-lg active">Button</a>
        </div>
        <div class="col-sm-6 text-center" >
            <a href="#" class="btn btn-lg">Button</a>
        </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