テンプレート | 株式会社Ace

ボタン

  • LINEボタン

    友だち追加
    コードを表示

    HTML

    <a href="https://lin.ee/vOf0Qwu" class="company_line"><img src="https://scdn.line-apps.com/n/line_add_friends/btn/ja.png" alt="友だち追加"></a>

    CSS

    /*LINEボタン*/
.company_line img {
  width: 180px;
  transition: all 0.4s;
  display: block;
  margin: 0 auto;
}

.company_line:hover img {
  opacity: 0.5;
}

@media (max-width: 750px) {
  .company_line img {
    width: 150px;
  }
}

  • ボタン2

    予約フォーム

    コードを表示

    HTML

    <p id="ace800_button" class="ace800_button_font">
	<a href="https://beauty.hotpepper.jp/esthe/" target="_blank" rel="noopener">予約フォーム</a>
</p>

    CSS

    /*ボタン2*/
#ace800_button {
  margin: 10px 0 20px;
  text-align: center;
}

#ace800_button a {
  font-size: 16px;
  display: inline-block;
  min-width: 250px;
  height: 60px;
  line-height: 60px;
  background-color: transparent;
  border: solid 1px #59340e;
  color: #58330c;
  font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  font-weight: 500;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

#ace800_button a:hover {
  background-color: #58330c;
  color: #fff;
}

@media (max-width: 1151px) {
  #ace800_button {
    margin: 10px 0 10px;
  }

  #ace800_button a {
    font-size: 14px;
    min-width: 200px;
    height: 50px;
    line-height: 50px;
  }
}

  • スライドボタン

    予約フォーム

    コードを表示

    HTML

    <p id="ace803_button" class="ace803_button_font">
  <a href="https://beauty.hotpepper.jp/esthe/" target="_blank" rel="noopener">予約フォーム</a>
</p>

    CSS

    /*スライドボタン*/
#ace803_button {
  margin: 10px 0 20px;
  text-align: center;
}

#ace803_button a {
  font-size: 16px;
  display: inline-block;
  min-width: 250px;
  height: 60px;
  line-height: 60px;
  background-color: transparent;
  border: solid 1px #59340e;
  color: #58330c;
  font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  font-weight: 500;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

#ace803_button a::after {
  background-color: #58330c;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}

#ace803_button a:hover {
  color: #fff;
}

#ace803_button a:hover::after {
  transform: scale(1, 1);
}

@media (max-width: 1151px) {
  #ace803_button {
    margin: 10px 0 10px;
  }

  #ace803_button a {
    font-size: 14px;
    min-width: 200px;
    height: 50px;
    line-height: 50px;
  }
}

  • 斜めスライドボタン

    予約フォーム

    コードを表示

    HTML

    <p id="ace804_button" class="ace804_button_font">
  <a href="https://beauty.hotpepper.jp/esthe/" target="_blank" rel="noopener">予約フォーム</a>
</p>

    CSS

    /*斜めスライドボタン*/
#ace804_button {
  margin: 10px 0 20px;
  text-align: center;
}

#ace804_button a {
  font-size: 16px;
  display: inline-block;
  min-width: 250px;
  height: 60px;
  line-height: 60px;
  background-color: transparent;
  border: solid 1px #59340e;
  color: #58330c;
  font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  font-weight: 500;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

#ace804_button a::after {
  background-color: #58330c;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
  transform: skewY(-10deg) scale(1, 0);
  height: 140px;
}

#ace804_button a:hover {
  color: #fff;
}

#ace804_button a:hover::after {
  transform: skewY(-10deg) scale(1, 1);
}

@media (max-width: 1151px) {
  #ace804_button {
    margin: 10px 0 10px;
  }

  #ace804_button a {
    font-size: 14px;
    min-width: 200px;
    height: 50px;
    line-height: 50px;
  }
}