CSSトランジションボタンの背景色

Question

ボタンにスライド右トランジションを作成しようとしています。 .container背景色を削除すると、トランジションが機能します。しかし、コンテナの色をデフォルトに保ちながら、ボタンを黒で始めると黄色に変わります。しかし、出力は異なるようです。ボタンの背景が透明な場合は、黄色に変わります。どんな助けもありがたいです。

.container { 
 
\t background: #F0F0F0; 
 
\t margin: 20px 20% 
 
} 
 
a.animated-button:link, a.animated-button:visited { 
 
\t position: relative; 
 
\t display: block; 
 
\t margin: 30px auto 0; 
 
\t padding: 14px 15px; 
 
\t color: #fff; 
 
\t font-size: 14px; 
 
\t text-align: center; 
 
\t text-decoration: none; 
 
\t text-transform: uppercase; 
 
\t overflow: hidden; 
 
\t -webkit-transition: all 1s ease; 
 
\t -moz-transition: all 1s ease; 
 
\t -o-transition: all 1s ease; 
 
\t transition: all 1s ease; 
 
} 
 
a.animated-button:link:after, a.animated-button:visited:after { 
 
\t content: ""; 
 
\t position: absolute; 
 
\t height: 0%; 
 
\t left: 50%; 
 
\t top: 50%; 
 
\t width: 150%; 
 
\t z-index: -1; 
 
\t -webkit-transition: all 0.75s ease 0s; 
 
\t -moz-transition: all 0.75s ease 0s; 
 
\t -o-transition: all 0.75s ease 0s; 
 
\t transition: all 0.75s ease 0s; 
 
} 
 
a.animated-button:link:hover, a.animated-button:visited:hover { 
 
\t color: #FFF; 
 
} 
 
a.animated-button:link:hover:after, a.animated-button:visited:hover:after { 
 
\t height: 450%; 
 
} 
 
a.animated-button:link, a.animated-button:visited { 
 
\t position: relative; 
 
\t display: block; 
 
\t margin: 30px auto 0; 
 
\t padding: 14px 15px; 
 
\t color: #fff; 
 
\t font-size: 14px; 
 
\t border-radius: 0; 
 
\t font-weight: bold; 
 
\t text-align: center; 
 
\t text-decoration: none; 
 
\t text-transform: uppercase; 
 
\t overflow: hidden; 
 
\t letter-spacing: .08em; 
 
\t text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2); 
 
\t -webkit-transition: all 1s ease; 
 
\t -moz-transition: all 1s ease; 
 
\t -o-transition: all 1s ease; 
 
\t transition: all 1s ease; 
 
} 
 
a.animated-button.thar-three { 
 
\t color: #fff; 
 
\t cursor: pointer; 
 
\t display: block; 
 
\t position: relative; 
 
\t border: 2px solid #F7CA18; 
 
\t transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s; 
 
} 
 
a.animated-button.thar-three:hover { 
 
\t color: #000 !important; 
 
} 
 
a.animated-button.thar-three:hover:before { 
 
\t left: 0%; 
 
\t right: auto; 
 
\t width: 100%; 
 
} 
 
a.animated-button.thar-three:before { 
 
\t display: block; 
 
\t position: absolute; 
 
\t top: 0px; 
 
\t right: 0px; 
 
\t height: 100%; 
 
\t width: 0px; 
 
\t z-index: -1; 
 
\t content: ''; 
 
\t color: #000 !important; 
 
\t background: #F7CA18; 
 
\t transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s; 
 
}

 <div class="container"> 
 
      <p><a href="#" class="animated-button thar-three">Register</a></p> 
 
     </div>

Answer 1

Iコードを少し調整し、現在の容器は、黒の背景が設定されたウェルにも取り組んでいます。今は黒から黄色に変化しています。また、私は滑らかなアニメーションの外観を作成するために黄色の境界を削除しました。

ここに作業スニペットがあります。

.container { 
 
\t background: #F0F0F0; 
 
\t margin: 20px 20% 
 
} 
 
a.animated-button:link, a.animated-button:visited { 
 
\t position: relative; 
 
\t display: block; 
 
\t margin: 30px auto 0; 
 
\t padding: 14px 15px; 
 
\t color: #fff; 
 
\t font-size: 14px; 
 
\t text-align: center; 
 
\t text-decoration: none; 
 
\t text-transform: uppercase; 
 
\t overflow: hidden; 
 
\t -webkit-transition: all 1s ease; 
 
\t -moz-transition: all 1s ease; 
 
\t -o-transition: all 1s ease; 
 
\t transition: all 1s ease; 
 
} 
 
a.animated-button:link:after, a.animated-button:visited:after { 
 
\t content: ""; 
 
\t position: absolute; 
 
\t height: 0%; 
 
\t left: 50%; 
 
\t top: 50%; 
 
\t width: 150%; 
 
\t z-index: -1; 
 
\t -webkit-transition: all 0.75s ease 0s; 
 
\t -moz-transition: all 0.75s ease 0s; 
 
\t -o-transition: all 0.75s ease 0s; 
 
\t transition: all 0.75s ease 0s; 
 
} 
 
a.animated-button:link:hover, a.animated-button:visited:hover { 
 
\t color: #FFF; 
 
} 
 
a.animated-button:link:hover:after, a.animated-button:visited:hover:after { 
 
\t height: 450%; 
 
} 
 
a.animated-button:link, a.animated-button:visited { 
 
\t position: relative; 
 
\t display: block; 
 
\t margin: 30px auto 0; 
 
\t padding: 14px 15px; 
 
\t color: #fff; 
 
\t font-size: 14px; 
 
\t border-radius: 0; 
 
\t font-weight: bold; 
 
\t text-align: center; 
 
\t text-decoration: none; 
 
\t text-transform: uppercase; 
 
\t overflow: hidden; 
 
\t letter-spacing: .08em; 
 
    z-index: 1; 
 
\t text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2); 
 
\t -webkit-transition: all 1s ease; 
 
\t -moz-transition: all 1s ease; 
 
\t -o-transition: all 1s ease; 
 
\t transition: all 1s ease; 
 
} 
 
a.animated-button.thar-three { 
 
\t color: #fff; 
 
\t cursor: pointer; 
 
\t display: block; 
 
\t position: relative; 
 
\t 
 
\t transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s; 
 
    background-color: black; 
 
} 
 
a.animated-button.thar-three:hover { 
 
\t color: #000 !important; 
 
} 
 
a.animated-button.thar-three:hover:before { 
 
\t left: 0%; 
 
\t right: auto; 
 
\t width: 100%; 
 
} 
 
a.animated-button.thar-three:before { 
 
\t display: block; 
 
\t position: absolute; 
 
\t top: 0px; 
 
\t right: 0px; 
 
\t height: 100%; 
 
\t width: 0px; 
 
\t z-index: -1; 
 
\t content: ''; 
 
\t color: #000 !important; 
 
\t background: #F7CA18; 
 
\t transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s; 
 
}

<div class="container"> 
 
      <p><a href="#" class="animated-button thar-three">Register</a></p> 
 
     </div>

Answer 2

あなたはそれを書いてきたように.containerとアンカー（a）の両方が同じZインデックス上にあるので、あなたの::before擬似要素は、.container要素を下回っています。

アンカーとコンテナの間に配置するには、アンカーをコンテナの上にz軸上に配置する必要があります。つまり、z-indexに設定します。

a.animated-button.thar-three { 
 
    color: #fff; 
 
    cursor: pointer; 
 
    display: block; 
 
    position: relative; 
 
    border: 2px solid #F7CA18; 
 
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s; 
 
    /* place it at a higher z-index than its parent ... */ 
 
    z-index: 1; 
 
} 
 

 
a.animated-button.thar-three:before { 
 
    display: block; 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
    height: 100%; 
 
    width: 0px; 
 
    /* ... to make this be in-between .container and the a */ 
 
    z-index: -1; 
 
    content: ''; 
 
    color: #000 !important; 
 
    background: #F7CA18; 
 
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s; 
 
} 
 

 
.container { 
 
    background: #F0F0F0; 
 
    margin: 20px 20% 
 
} 
 

 
a.animated-button:link, 
 
a.animated-button:visited { 
 
    position: relative; 
 
    display: block; 
 
    margin: 30px auto 0; 
 
    padding: 14px 15px; 
 
    color: #fff; 
 
    font-size: 14px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    overflow: hidden; 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 

 
a.animated-button:link:after, 
 
a.animated-button:visited:after { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 0%; 
 
    left: 50%; 
 
    top: 50%; 
 
    width: 150%; 
 
    z-index: -1; 
 
    -webkit-transition: all 0.75s ease 0s; 
 
    -moz-transition: all 0.75s ease 0s; 
 
    -o-transition: all 0.75s ease 0s; 
 
    transition: all 0.75s ease 0s; 
 
} 
 

 
a.animated-button:link:hover, 
 
a.animated-button:visited:hover { 
 
    color: #FFF; 
 
} 
 

 
a.animated-button:link:hover:after, 
 
a.animated-button:visited:hover:after { 
 
    height: 450%; 
 
} 
 

 
a.animated-button:link, 
 
a.animated-button:visited { 
 
    position: relative; 
 
    display: block; 
 
    margin: 30px auto 0; 
 
    padding: 14px 15px; 
 
    color: #fff; 
 
    font-size: 14px; 
 
    border-radius: 0; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    overflow: hidden; 
 
    letter-spacing: .08em; 
 
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2); 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 

 
a.animated-button.thar-three:hover { 
 
    color: #000 !important; 
 
} 
 

 
a.animated-button.thar-three:hover:before { 
 
    left: 0%; 
 
    right: auto; 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <p><a href="#" class="animated-button thar-three">Register</a></p> 
 
</div>