<h1>More (더보기 아이콘)</h1>

<h2>:: 기본형</h2>
<button type="button" class="button_more" aria-label="더보기"><i class="icon_more"></i></button>


<h2>:: 예시</h2>
<button type="button" class="button_more_ex1 has_bg" aria-label="더보기"><i class="icon_more_ex1"></i></button>
<button type="button" class="button_more_ex2 has_bg" aria-label="메뉴"><i class="icon_more_ex2"></i></button>
<button type="button" class="button_more_ex3 has_bg" aria-label="메뉴"><i class="icon_more_ex3"></i></button>
body {
  font-family: Helvetica,"Apple SD Gothic Neo",sans-serif;
}

button {
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: 0;
}

// More icon SCSS mixin
@mixin iconMoreRequiredParent($direction: 'vertical', $size: 4px, $interval: 4px, $color: #000, $padding: 0) {
	position: relative;
	display: block;
	margin: $size+$interval+$padding;

	&, &:before, &:after {
		width: $size;
		height: $size;
		border-radius: 50%;
		background-color: $color;
	}

	&:before, &:after {
		content: '';
		position: absolute;
	}

	@if ($direction == 'vertical') {
		&:before {
			top: -($size+$interval);
			left: 0;
		}

		&:after {
			top: $size+$interval;
			left: 0;
		}

	} @else if ($direction == 'horizontal') {
		&:before {
			top: 0;
			left: -($size+$interval);
		}

		&:after {
			top: 0;
			left: $size+$interval;
		}
	}
}

.has_bg {
  background-color: pink;
}

// 기본형
.icon_more { 
  @include iconMoreRequiredParent(); 
}

// 예시
.icon_more_ex1 { 
  @include iconMoreRequiredParent($direction: 'horizontal', $size: 4px, $interval: 10px, $color: #000, $padding: 0); 
}

.icon_more_ex2 { 
  @include iconMoreRequiredParent($direction: 'vertical', $size: 10px, $interval: 10px, $color: #000, $padding: 10px);
  
  &, &:before, &:after {
    box-shadow: 0 3px 4px 0 rgba(#000, 0.5);
  }
}

.button_more_ex3 {
  border-radius: 50%;
  background-color: #eee;
}

.icon_more_ex3 { 
  @include iconMoreRequiredParent($direction: 'horizontal', $size: 5px, $interval: 5px, $color: #444, $padding: 15px);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.