Fab Buttons

by yaero

HTML

<ul class='fab-buttons fab-buttons--2'>
  <li><div>1</div></li>
  <li><div>2</div></li>
</ul>

<ul class='fab-buttons fab-buttons--3'>
  <li><div>1</div></li>
  <li><div>2</div></li>
  <li><div>3</div></li>
</ul>

<ul class='fab-buttons fab-buttons--4'>
  <li><div>1</div></li>
  <li><div>2</div></li>
  <li><div>3</div></li>
	<li><div>4</div></li>
</ul>

SCSS

@mixin on-arc($item-count, $circle-size, $item-size) {  
  position: relative;
  width:  $circle-size;
  height: $circle-size;
  border-radius: 50%;
  padding: 0; 
  list-style: none;
  
  > * {
    display: block;
    position: absolute;
    top:  50%; 
    left: 50%;
    margin: -($item-size / 2);
    width:  $item-size;
    height: $item-size;
  
    $angle: (90 / ($item-count + 1));
    $rot: $angle;

    @for $i from 1 through $item-count {
      &:nth-of-type(#{$i}) {
        transform: rotate($rot * 1deg) translate(-$circle-size / 2) rotate(-$rot * 1deg);
      }

      $rot: $rot + $angle;
    }
  }
}

.fab-buttons {
  margin: 2em auto 0;
  border: solid 5px #ddd; // just for illustration to see circle

  li { 
    display: block; 
    max-width: 100%; 
    border-radius: 50%;
    background-color: lightblue;
    border: solid 1px blue;
    transition: .15s;
		display: flex;
		justify-content: center;
		align-items: center;
  }
}

$supported-max-count: 5;
@for $i from 1 through $supported-max-count {
	.fab-buttons--#{$i} {
		 @include on-arc($item-count: $i, $circle-size: 15em, $item-size: 2em); 
	}
}