Adding transition effect to button is not working

Question

I have added a transition effect to a button but it is not working. The background color is white; by adding the transition effect, the color should be moved from bottom to top but it is not effecting. Here is the fiddle link for that. This is the code:

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

Answer 1

Move transition definition to a separate section .hourlypricing:hover like this (Also I've set a transtion time to 1s for better visibility):

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

Answer 2

You can achieve it by using transform: scaleY() and transform-origin . Check below snippet for reference.

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

Update: For activate button you need to use scripts. Check below snippet for reference.

 $('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>

Answer 3

You not change any value

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

CSS transitions allows you to change property values smoothly from one value to another.

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