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>

问题是当我悬停按钮时效果有效，但当按钮静止时它没有样式

*编辑：

很抱歉没有发布所有代码。

对于我想要修改的内容，这应该足够了。

提前致谢。

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

这应该有所帮助。任何我遇到麻烦的点击动画。

使用悬停效果设置按钮样式

1 个答案: