造型與懸停效果的按鈕

我加入這個按鈕到我的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>

的問題是，當我懸停效果的工作原理按鈕但是當按鈕是靜態的它沒有造型

*編輯：

對不起˚F或者沒有發佈所有的代碼。

這應該足夠我想要修改的東西。

在此先感謝。

來源

2017-09-06 Herschel Lieberman

我爲此創建了一個小提琴。 https://jsfiddle.net/rb9Lfvaq/。我沒有看到任何問題。你能說出你到底在找什麼嗎？ –

那麼，這是什麼問題？懸停似乎工作正常。其他一切都很好 –

_問題是，當我把鼠標懸停在button_上時，效果就起作用了，這就是你寫代碼的方式，只是'box-shadow'屬性在'：hover'部分內就足夠了。無需重複'：hover'中的每個屬性！ –

.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>

這應該幫助。任何我遇到麻煩的點擊動畫。

來源

2017-09-06 17:15:34 EgMusic

造型與懸停效果的按鈕

回答

相關問題