ホバー効果のあるボタンのスタイリング

Question

私のコードに問題があります。

私はボタンクラスのスタイリングとホバー効果と私のHTMLページとCSSにこのボタンを追加しました：

.buton4e { 
 
    background-color: #383f95; 
 
    border: none; 
 
    border-radius: 8px; 
 
    color: white; 
 
    padding: 7px 16px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
    font-size: 16px; 
 
} 
 

 
.buton4e:hover { 
 
    background-color: #383f95; 
 
    border: none; 
 
    border-radius: 8px; 
 
    color: white; 
 
    padding: 7px 16px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-weight: bold; 
 
    font-size: 16px; 
 
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 40px 0 rgba(0, 0, 0, 0.19); 
 
} 
 

 
.intro-header { 
 
    padding-top: 40px; 
 
    padding-bottom: 40px; 
 
    text-align: center; 
 
    color: #f8f8f8; 
 
    background: url(../img/background.jpg) no-repeat center center; 
 
    background-size: cover; 
 
} 
 

 
.intro-message { 
 
    position: relative; 
 
    padding-top: 20%; 
 
    padding-bottom: 20%; 
 
} 
 

 
.intro-message>h1 { 
 
    margin: 0; 
 
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); 
 
    font-size: 5em; 
 
} 
 

 
.intro-divider { 
 
    width: 400px; 
 
    border-top: 1px solid #f8f8f8; 
 
    border-bottom: 1px solid rgba(0, 0, 0, 0.2); 
 
} 
 

 
.intro-message>h3 { 
 
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); 
 
}

<!-- Header --> 
 
<header class="intro-header"> 
 
    <div class="container"> 
 
    <div class="intro-message"> 
 
     <br /><br /><br /> 
 
     <h3>90% of IT companies believe they need to partner to grow.<br /> Join <b>Channeliser</b> - the global network for building IT partnerships.</h3> 
 
     <hr class="intro-divider"> 
 
     <a href="#content-section-a"><button class="buton4e">JOIN FOR FREE</button></a> 
 
    </div> 
 
    </div> 
 
</header>

問題は、私は置くと効果が働くということですボタンが、そこにボタンが静的であるとき、それは何のスタイルを持っていない

* EDIT：F

申し訳ありませんすべてのコードを投稿しないでください。

これは、私が修正しようとしているもので十分です。

ありがとうございます。

Answer 1

.styledButton { 
 
    font-family: Arial; 
 
    width: 100px; 
 
    height: 50px; 
 
    color: black; 
 
    background-color: grey; 
 
    border: 0; 
 
    -webkit-transition-duration: 0.3s; 
 
    transition-duration: 0.3s; 
 
} 
 
.styledButton:hover { 
 
    color: white; 
 
    background-color: black; 
 
} 
 
.styledButton:active { 
 
    opacity: 0.5; 
 
}

<button class = "styledButton">Click Me!</button>

これは役立つはずです。クリックアニメーションに問題があります。