向按钮添加过渡效果不起作用

时间：2017-10-05 10:12:21

标签： html css

我在按钮上添加了transition效果，但它无效。背景颜色为白色;通过添加过渡效果，颜色应该从下到上移动但不起作用。这是fiddle link。这是代码：

.hourlypricing {
  background: #57c1e8;
  border: .2rem solid #57c1e8;
  min-width: 16.5rem;
  display: inline-block;
  text-align: center;
  height: 6rem;
  margin-left: 265px;
  line-height: 5.6rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  font-size: 1.4rem;
  padding: 0 2.5rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none !important;
  -webkit-transition: background-color .1s ease-in-out, color .1s ease-in-out, -webkit-box-shadow .1s ease-in-out;
  transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out;
}

button.monthlypricing {
  margin-left: 50px;
  background: #fff;
  border: .2rem solid #57c1e8;
  min-width: 16.5rem;
  display: inline-block;
  text-align: center;
  height: 6rem;
  line-height: 5.6rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  font-size: 1.4rem;
  padding: 0 2.5rem;
  font-weight: 700;
  cursor: pointer;
  color: #000;
  text-decoration: none !important;
  -webkit-transition: background-color .1s ease-in-out, color .1s ease-in-out, -webkit-box-shadow .1s ease-in-out;
  transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out;
}
<div class="hourly">
  <button class="hourlypricing">Hourly Pricing</button>
  <span class="FyfR" data-reactid="5">or</span>
  <button class="monthlypricing">Monthly Pricing</button>
</div>

3 个答案:

答案 0 :(得分：0)

将转换定义移动到这样的单独部分.hourlypricing:hover（同时我将转换时间设置为1秒以获得更好的可见性）：

.hourlypricing 
	{
    background: #57c1e8;
    border: .2rem solid #57c1e8;
    min-width: 16.5rem;
    display: inline-block;
    text-align: center;
    height: 6rem;
	margin-left:265px;
    line-height: 5.6rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    white-space: nowrap;
    font-size: 1.4rem;
    padding: 0 2.5rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none !important;}
    
.hourlypricing:hover {    
	-webkit-transition: background-color .1s ease-in-out,color .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
    transition: background-color 1s ease-in-out,color 1s ease-in-out,box-shadow 1s ease-in-out;
    background-color: red;
    }
    
	button.monthlypricing 
	{
    margin-left: 50px;
	background:#fff;
	border: .2rem solid #57c1e8;
    min-width: 16.5rem;
    display: inline-block;
    text-align: center;
    height: 6rem;
	line-height: 5.6rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    white-space: nowrap;
    font-size: 1.4rem;
    padding: 0 2.5rem;
    font-weight: 700;
    cursor: pointer;
	color:#000;
    text-decoration: none !important;
	-webkit-transition: background-color .1s ease-in-out,color .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
    transition: background-color .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out;
    }
<div class="hourly">                          		
						<button class="hourlypricing">Hourly Pricing</button>
						<span class="FyfR" data-reactid="5">or</span>
						<button class="monthlypricing">Monthly Pricing</button>
						
						
				</div>

答案 1 :(得分：0)

您可以使用transform: scaleY()和transform-origin来实现这一目标。请查看下面的代码段以供参考。

.hourlypricing {
  background: #57c1e8;
  border: .2rem solid #57c1e8;
  min-width: 16.5rem;
  display: inline-block;
  text-align: center;
  height: 6rem;
  margin-left: 265px;
  line-height: 5.6rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  font-size: 1.4rem;
  padding: 0 2.5rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none !important;
  position: relative;
  z-index: 1;
}

.hourlypricing:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  transition: transform 1s;
  transform-origin: top center;
  transform: scaleY(0);
  z-index: -1;
}

.hourlypricing:hover:after {
  transform: scaleY(1);
}

button.monthlypricing {
  margin-left: 50px;
  background: #fff;
  border: .2rem solid #57c1e8;
  min-width: 16.5rem;
  display: inline-block;
  text-align: center;
  height: 6rem;
  line-height: 5.6rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  font-size: 1.4rem;
  padding: 0 2.5rem;
  font-weight: 700;
  cursor: pointer;
  color: #000;
  text-decoration: none !important;
  -webkit-transition: background-color .1s ease-in-out, color .1s ease-in-out, -webkit-box-shadow .1s ease-in-out;
  transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out;
}
<div class="hourly">
  <button class="hourlypricing">Hourly Pricing</button>
  <span class="FyfR" data-reactid="5">or</span>
  <button class="monthlypricing">Monthly Pricing</button>
</div>

更新：对于激活按钮，您需要使用脚本。请查看下面的代码段以供参考。

$('button').click(function() {
  $('button').removeClass('active');
  $(this).addClass('active');
});
button.active {
  background: #57c1e8 !important;
}

button:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  transition: transform 1s;
  transform-origin: top center;
  transform: scaleY(0);
  z-index: -1;
}

button:hover:after {
  transform: scaleY(1);
}

button.active:hover:after {
  transform: scaleY(0);
}

button {
  background: #fff;
  border: .2rem solid #57c1e8;
  min-width: 16.5rem;
  display: inline-block;
  text-align: center;
  height: 6rem;
  line-height: 5.6rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  font-size: 1.4rem;
  padding: 0 2.5rem;
  font-weight: 700;
  cursor: pointer;
  color: #000;
  text-decoration: none !important;
  -webkit-transition: background-color .1s ease-in-out, color .1s ease-in-out, -webkit-box-shadow .1s ease-in-out;
  transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out;
  position: relative;
  z-index: 1;
}

button.monthlypricing {
  margin-left: 50px;
}

button.hourlypricing {
  margin-left: 265px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hourly">
  <button class="hourlypricing active">Hourly Pricing</button>
  <span class="FyfR" data-reactid="5">or</span>
  <button class="monthlypricing">Monthly Pricing</button>
</div>

答案 2 :(得分：-1)

您不能更改任何值

https://www.w3schools.com/css/css3_transitions.asp

CSS过渡允许您将属性值从一个值平滑地更改为另一个值。

.hourlypricing {
  background: #57c1e8;
  transition: background-color .1s ease-in-out;
}

.hourlypricing:hover {
  background: red;
}

相关问题
最新问题