hoverすると、ボタンの色が右からジワジワ変わる

html
1  <section class="woof">
2    <div class="door-woof">
3      <div class="woof_header js-in-text">WOOF
4      </div>
5      <div clas="door-woof-main">
6        <div class="test1 left_box side-box">
7          <div class="inner">
8            <p class="inner-tittle">犬と共に<br>
9              暮らす生活</p>
10            <p>犬と平和な生活を一緒に守っていきましょう。</p>
11         </div>
12       </div>
13        <div class="test1 center_box"> 　　　　　　
14        </div>
15        <div class="test1 right_box side-box">
16          <div class="dog_button inner"> 
17            <a><span class="bg-c"></span> 
18               <span class="button-c">ABOUT US</span> 
19            </a>
20          </div>
21        </div>
22      </div>
23    </div>
24  </section>
25
26 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>	
27 <script>
28  $('.button-c').hover( 
29    function(){$(".bg-c").addClass('on_hover');},  
30    function(){$(".bg-c").removeClass('on_hover');}
31);
32 </script>
33---CSS----------------------------------------------
34.dog_button{
35	text-align: center;
36	letter-spacing: 0.2em;
37	font-size: 0.8em;
38	font-weight: 600;
39	border-radius: 8px;
40	position: relative;
41}
42.button-c{
43	background-color: #FFF;
44	color: black;
45    border-radius: 3px;
46	padding: 1.5em 4em;
47}
48.on_hover{
49	background-color: #0C0B0B;
50    transition: all 1s ease;
51	transform: translate(-110%) skew(20deg);
52}
53.bg-c{
54	background-color: #000;
55	position: absolute;
56    right: -70%;
57    top: 44.5%;
58    width: 80%;
59    height: 10.5%;
60
61}
62

以下サイトをお手本として、似たようなページを練習用で作ってるのですが、
https://rinn.co.jp/

中段の「MEWO」部分の「ABOUT US」のhoverすると、ボタン内の色がシュンと斜め状に代わり、
マウスを外すと、戻るというの作りたく、、

hoverすると、on_hoverというクラス名を足すjsを書いてみたのですが、
お手本とは異なる陳腐な仕掛けになってしまいました、、

どういったコードの書き方が正しいか教えていただけますでしょうか＞＜
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

ちょっと動きが違うかもですが、CSSで似たようなのが作れます。
例ではz-index:-1のレイヤーに四角いものを斜めに変形して動かしています。

手本にされているサイトは、四角いものが回転しているのかもしれません。

css
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5
6  <title>TEST</title>
7  <style>
8
9  .button {
10    position: relative;
11    display: inline-block;
12    padding: .5em;
13    width:120px;
14    border: 1px solid #333;
15    color: #333;
16    text-align: center;
17    text-decoration: none;
18    transition: .5s;
19    border-radius: 10px;
20  }
21  .button:hover {
22    color: #fff;
23  }
24  .button {
25    overflow: hidden;
26  }
27  .button::before {
28    position: absolute;
29    top: 0;
30    left: 0;
31    z-index: -1;
32    content: '';
33    width: 120%;
34    height: 100%;
35    background: #333;
36    transform-origin: left top;
37    transform: skewX(-30deg) scale(0, 1);
38    transition: transform .5s;
39  }
40  .button:hover::before {
41    transform-origin: right top;
42    transform: skewX(-10deg) scale(1.1, 1.1);
43  }
44
45</style>
46</head>
47<body>
48  <a class="button" href="#">About Us</a>
49</body>