How to set border left and right of button using before?

Question

How to set border left and right of button using only one :before or :after with 20px space left and right side of button, What i tried to set border see attachment of design - what i want. Please help me by my screenshot. Thanks in advance.

 .btn-action { display: block; text-align: center; max-width: 800px; margin: 0 auto; background-color: gray; height: 400px; -webkit-box-orient: vertical!important; -webkit-box-direction: normal!important; -ms-flex-direction: column!important; flex-direction: column!important; display: -webkit-box!important; display: -ms-flexbox!important; display: flex!important; -webkit-box-pack: center!important; -ms-flex-pack: center!important; justify-content: center!important; -webkit-box-align: center!important; -ms-flex-align: center!important; align-items: center!important; } .btn { display: inline-block; font-size: 18px; line-height: 24px; color: #fff; padding: 12px 32px; border: 2px solid #C3A165; text-transform: uppercase; font-weight: 500; background-color: transparent; border-radius: 0; text-decoration: none; transition: 0.3s all; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; } .btn:hover { background-color: #C3A165; color: #fff; border-color: #C3A165; } .btn:before { content: ''; height: 1px; background-color: #C3A165; width: 100%; position: absolute; left: 0; top: 25px; } .border { position: relative; width: 100%; } 

 <section class="btn-action"> <div class="border"> <a href="#" class="btn primary">Get Started</a> </div> </section> 

Answer 1

Since only one pseudo element is allowed, you can use box-shadow to achieve the effect. However the position values have to be hardcoded.

 .btn-action { display: block; text-align: center; max-width: 800px; margin: 0 auto; background-color: gray; height: 400px; -webkit-box-orient: vertical!important; -webkit-box-direction: normal!important; -ms-flex-direction: column!important; flex-direction: column!important; display: -webkit-box!important; display: -ms-flexbox!important; display: flex!important; -webkit-box-pack: center!important; -ms-flex-pack: center!important; justify-content: center!important; -webkit-box-align: center!important; -ms-flex-align: center!important; align-items: center!important; overflow: hidden; } .btn { display: inline-block; font-size: 18px; line-height: 24px; color: #fff; padding: 12px 32px; border: 2px solid #C3A165; text-transform: uppercase; font-weight: 500; background-color: transparent; border-radius: 0; text-decoration: none; transition: 0.3s all; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; } .btn:hover { background-color: #C3A165; color: #fff; border-color: #C3A165; } .btn:before { content: ''; height: 1px; background: linear-gradient(to right,#C3A165 30%,transparent 30% 70%,#C3A165 70% 100%); width: 100%; position: absolute; left: 0px; top: 25px; } .border { position: relative; width: 100%; } 

 <section class="btn-action"> <div class="border"> <a href="#" class="btn primary">Get Started</a> </div> </section> 

Another method is to use linear-gradient

 .btn-action { display: block; text-align: center; max-width: 800px; margin: 0 auto; background-color: gray; height: 400px; -webkit-box-orient: vertical!important; -webkit-box-direction: normal!important; -ms-flex-direction: column!important; flex-direction: column!important; display: -webkit-box!important; display: -ms-flexbox!important; display: flex!important; -webkit-box-pack: center!important; -ms-flex-pack: center!important; justify-content: center!important; -webkit-box-align: center!important; -ms-flex-align: center!important; align-items: center!important; overflow: hidden; } .btn { display: inline-block; font-size: 18px; line-height: 24px; color: #fff; padding: 12px 32px; border: 2px solid #C3A165; text-transform: uppercase; font-weight: 500; background-color: transparent; border-radius: 0; text-decoration: none; transition: 0.3s all; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; } .btn:hover { background-color: #C3A165; color: #fff; border-color: #C3A165; } .btn:before { content: ''; height: 1px; background: linear-gradient(to right,#C3A165 30%,transparent 30% 70%,#C3A165 70% 100%); width: 100%; position: absolute; left: 0px; top: 25px; } .border { position: relative; width: 100%; } 

 <section class="btn-action"> <div class="border"> <a href="#" class="btn primary">Get Started</a> </div> </section> 

Answer 2

Use both :before and :after for left and right line respectively.

 .btn-action { display: block; text-align: center; max-width: 800px; margin: 0 auto; background-color: gray; height: 400px; -webkit-box-orient: vertical!important; -webkit-box-direction: normal!important; -ms-flex-direction: column!important; flex-direction: column!important; display: -webkit-box!important; display: -ms-flexbox!important; display: flex!important; -webkit-box-pack: center!important; -ms-flex-pack: center!important; justify-content: center!important; -webkit-box-align: center!important; -ms-flex-align: center!important; align-items: center!important; overflow: hidden; } .btn { position: relative; display: inline-block; font-size: 18px; line-height: 24px; color: #fff; padding: 12px 32px; border: 2px solid #C3A165; text-transform: uppercase; font-weight: 500; background-color: transparent; border-radius: 0; text-decoration: none; transition: 0.3s all; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; } .btn:hover { background-color: #C3A165; color: #fff; border-color: #C3A165; } .btn:before { content: ''; height: 1px; background-color: #C3A165; width: 1000px; position: absolute; left: -1040px; top: 25px; } .btn:after { content: ''; height: 1px; background-color: #C3A165; width: 1000px; position: absolute; right: -1040px; top: 25px; } .border { position: relative; width: 100%; } 

 <section class="btn-action"> <div class="border"> <a href="#" class="btn primary">Get Started</a> </div> </section> 

Answer 3

Apply this css may be this you are looking for

.btn {
      display: inline-block;
      font-size: 18px;
      line-height: 24px;
      color: #fff;
      padding: 12px 32px;
      border: 2px solid #C3A165;
      text-transform: uppercase;
      font-weight: 500;
      background-color: transparent;
      border-radius: 0;
      text-decoration: none;
      transition: 0.3s all;
      -webkit-transition: 0.3s all;
      -moz-transition: 0.3s all;
      -ms-transition: 0.3s all;
      z-index:2;
    }
    .btn:hover {
      background-color: #C3A165;
      color: #fff;
      border-color: #C3A165;
    }
    .btn:before {
      content: '';
      height: 1px;
      background-color: #C3A165;
      width: 35%;
      position: absolute;
      left: 0;
      top: 25px;
      z-index:1;
    }
    .btn:after {
      content: '';
      height: 1px;
      background-color: #C3A165;
      width: 35%;
      position: absolute;
      right: 0;
      top: 25px;
      z-index:1;
    }
    .border {
      position: relative;
      width: 100%;
    }