adding horizontal line next to a button

Question

I have a button which I want to add white line on each side. Whatever I tried is either adding a line inside the button, or only on one side. I have done the lines next to a Text, but I am having issues adding them on each side of a button.

here is my code

HTML

<button class="inst-btn" type="submit">Find Classes Now!</button>

CSS

.inst-btn { text-transform: uppercase; width: 320px; margin: 60px 0 0 320px; background-color:#eb6623; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; outline: 0;  }
.inst-btn { font-size: 26px; color: #fff; padding: 5px 5px; margin: 0px; font-family: "arial"; border: 0px; margin-left: 310px; margin-top: 60px}

Maybe [this pen](http://codepen.io/ericrasch/pen/Irlpm) can help — Laurent S., Jul 28 '15 at 20:03

jaunt · Answer 1 · 2015-07-28T20:28:15.663

You could use the following method and create a wrapper element and use the :before and :after positional pseudo selectors. Here's an example of what I mean:

.inst-btn { 
  text-transform: uppercase; 
  width: 320px; 
  margin: 60px 0 0 320px; 
  background-color:#eb6623; 
  -moz-border-radius:5px; 
  -webkit-border-radius:5px; 
  border-radius:5px; 
  outline: 0;  
}
.inst-btn{ 
  font-size: 26px; 
  color: white; 
  padding: 5px; 
  margin: 0; 
  font-family: "arial"; 
  border: 0; 
}
.wrapper:before,.wrapper:after{
  content:" ";
  width: 100px;
  height: 2px;
  margin: 0 10px;
  vertical-align: super;
  background-color:grey;
  display:inline-block;
}

<div class="wrapper"><button class="inst-btn" type="submit">Find Classes Now!</button></div>

score 0 · Answer 2 · answered Jul 28 '15 at 19:55

The second line of CSS needs a closed bracket, and if you need the rest of the code after 'padding:' try to use some quotes to comment 'fff' out and then include the rest of your code there. Either """ fff """ or '''fff''' will suffice, I suggest the latter to save space in the code.

score -1 · Answer 3 · edited May 23 '17 at 12:33

Here is answer form this link: CSS technique for a horizontal line with words in the middle

    .inst-btn { display:inline-block;}
    .inst-btn:before,
    .inst-btn:after {
        border-top: 1px solid black;
        display: block;
        height: 1px;
        content: " ";
        width: 40%;
        position: absolute;
        left: 0;
        top: 1.2em;
    }

The :before and :after elements are positioned absolutely so we can pull one to the left and one to the right. Also, the width (40% in this case) is very dependent of the width of the text inside.. have to think about a solution for that. At least the top: 1.2em makes sure the lines stay more or less in the center of the text even if you have different font size.

Here is fiddle:: http://jsfiddle.net/tUGrf/3/

adding horizontal line next to a button

3 Answers3