Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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;}
like image 933
psel Avatar asked Jan 02 '26 01:01

psel


1 Answers

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>
like image 82
simon Avatar answered Jan 04 '26 11:01

simon



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!