Search code examples
htmlcssbuttonhorizontal-line

Horizontal line in between circular buttons


I am trying to achieve a horizontal line in between circular buttons. Something like below. I got the circular buttons but I am not sure how to achieve horizontal line (responsive too) in between each circular button.

Please throw some thoughts and ideas.

O-----O-------O------O

HTML Code:

<div class="modal-body">
    <div class="row-fluid">
  <button type="button" uncheckable class="btn  btn-xl" ng-click="selected(0)">No </button>
  <hr class="horizontal"/>
  <button type="button" uncheckable class="btn  btn-xl" ng-click="selected(2)">yes<br></button>
  <hr class="horizontal"/>
  <button type="button" uncheckable class="btn   btn-xl" ng-click="selected(4)">may be<br></button>
  <hr class="horizontal"/>
  <button type="button" uncheckable class="btn  btn-xl" ng-click="selected(6)">not sure<br></button>
 </div>
</div>

CSS code:

.btn-xl {
  width: 80px;
  height: 80px;
  padding: 10px 10px;
  line-height: 1.33;
  border-radius: 50%;
  background-color: #ffffff;
  text-align: center;
  font-size: 14px;
  border-width: 2px;
  border-color: #00ABE2;
}

.horizontal{
  display: block;
  position: relative;
  padding: 0px;
  width:30%;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  margin-left: auto;
  margin-right: auto;
  border: 0;
  border-top: 1px solid #00ABE2;}

Solution

  • Something like this might be what you are looking for?

    JSFiddle: https://jsfiddle.net/d1u9fngq/

    CSS:

    .btn-xl {
      width: 80px;
      height: 80px;
      padding: 10px 10px;
      line-height: 1.33;
      border-radius: 50%;
      background-color: #ffffff;
      text-align: center;
      font-size: 14px;
      border-width: 2px;
      border-color: #00ABE2;
      display: inline-block;
    }
    
    .horizontal{
        display: inline-block;
        width: 100px;
    }
    

    HTML:

    <div class="modal-body">
        <div class="row-fluid">
        <button type="button" uncheckable class="btn  btn-xl" ng-click="selected(0)">No </button>
        <hr class="horizontal"/>
        <button type="button" uncheckable class="btn  btn-xl" ng-click="selected(2)">yes<br></button>
        <hr class="horizontal"/>
        <button type="button" uncheckable class="btn   btn-xl" ng-click="selected(4)">may be<br></button>
        <hr class="horizontal"/>
        <button type="button" uncheckable class="btn  btn-xl" ng-click="selected(6)">not sure<br></button>
    </div>