search icon

index.html

<div class="o-central-box">
  <button type="button"><span>search</span></button>
</div>

search-icon.markdown

search icon

A Pen by ManabuYasuda on CodePen.

License.

style.css

$search-icon-size: 18px;
$search-icon-stroke: 3px;
$search-icon-color: #333;

button {
    width: $search-icon-size;
    height: $search-icon-size;
    border: 0;
    background: none;
    border-radius: 100%;
    box-shadow: 0 0 0 $search-icon-stroke $search-icon-color;
    color: inherit;
    cursor: pointer;
    padding: ($search-icon-size - $search-icon-stroke) / 20;
    padding-right: $search-icon-size;
  &:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 50%;
    width: $search-icon-stroke;
    height: $search-icon-size / 4 * 3;
    transform: translate($search-icon-size / 8 * 5 + $search-icon-stroke, $search-icon-size / 8 * 5 + $search-icon-stroke) translate(-50%,-50%) rotate(-45deg) scaleY(1);
    background: $search-icon-color;
  }
}

$central-ns: null !default;
.#{$central-ns}o-central-box {
    position: absolute;
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
}

button > span {
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
}