Parts

Parts

シンプルなボタン 15


<div class="simpleButton">
  <a href="#">詳細はこちら</a>
</div>
                

.simpleButton {
  position: relative;
  display: inline-block;
}
.simpleButton::before {
  content: "";
  width: 0.4em;
  height: 0.8em;
  display: block;
  background: url("/img/icon/angle-right.svg") no-repeat center center;
  background-size: 100% auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -0.4em;
  margin-left: 3.2em;
  transition: 0.3s all ease;
}
.simpleButton:hover::before {
  margin-left: 3.5em;
}
.simpleButton a {
  display: inline-block;
  line-height: 1.4em;
  padding: 0.8em 2.5em 0.8em 1.8em;
  position: relative;
  border: #000 solid 1px;
}
.simpleButton a::before {
  content: "";
  border: #000 solid 1px;
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
}
.simpleButton a::after {
  content: "";
  border: #000 solid 1px;
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
}
.simpleButton a:hover {
  color: #666;
}

              

.simpleButton {
  position: relative;
  display: inline-block;
  &::before {
    content: "";
    width: 0.4em;
    height: 0.8em;
    display: block;
    background: url("/img/icon/angle-right.svg") no-repeat center center;
    background-size: 100% auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -0.4em;
    margin-left: 3.2em;
    transition: 0.3s all ease;
  }
  &:hover{
    &::before {
      margin-left: 3.5em;
    }
  }
  a{
    display: inline-block;
    line-height: 1.4em;
    padding: 0.8em 2.5em 0.8em 1.8em;
    position: relative;
    border: #000 solid 1px;
    &::before {
      content: "";
      border: #000 solid 1px;
      position: absolute;
      top: 1px;
      left: 1px;
      width: calc(100% - 2px);
      height: calc(100% - 2px);
    }
    &::after {
      content: "";
      border: #000 solid 1px;
      position: absolute;
      top: 3px;
      left: 3px;
      width: calc(100% - 6px);
      height: calc(100% - 6px);
    }
    &:hover{
      color: #666;
    }
  }
}
                
ページ上部に戻るスプーン