Generated by SassMeister.com.

SassMeister-input-HTML.haml

.btn-group
  %a.btn{:href => '#'} Refresh
  %a.btn{:href => '#'} Follow
  %a.btn{:href => '#'} Back to list

SassMeister-input.sass

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

.btn-group
  border-radius: 4px

  .btn
    border-radius: 0

    &:first-child,
    &:last-child
      border-radius: 4px
    
    &:first-child
      border-bottom-right-radius: 0
      border-top-right-radius: 0
    
    &:last-child
      border-bottom-left-radius: 0
      border-top-left-radius: 0
    

.btn
  background: #FDFEFE
  background-image: linear-gradient(to top, #F2F9FA 0%, #FDFEFE 100%)
  border: 1px solid #c6d5d9
  border-radius: 4px
  color: #7b989e
  display: inline-block
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
  font-size: 12px
  margin-right: -5px
  padding: 8px 10px
  text-decoration: none
  &:hover
    background-image: linear-gradient(to top, #FDFEFE 0%, #F2F9FA 100%)

SassMeister-output.css

.btn-group {
  border-radius: 4px;
}
.btn-group .btn {
  border-radius: 0;
}
.btn-group .btn:first-child, .btn-group .btn:last-child {
  border-radius: 4px;
}
.btn-group .btn:first-child {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.btn-group .btn:last-child {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.btn {
  background: #fdfefe;
  background-image: linear-gradient(to top, #f2f9fa 0%, #fdfefe 100%);
  border: 1px solid #c6d5d9;
  border-radius: 4px;
  color: #7b989e;
  display: inline-block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  margin-right: -5px;
  padding: 8px 10px;
  text-decoration: none;
}
.btn:hover {
  background-image: linear-gradient(to top, #fdfefe 0%, #f2f9fa 100%);
}

SassMeister-rendered.html

<div class='btn-group'>
  <a class='btn' href='#'>Refresh</a>
  <a class='btn' href='#'>Follow</a>
  <a class='btn' href='#'>Back to list</a>
</div>