CODEWITHSUNDEEP
jquerycss
Brad Evans
Brad Evans

Reputation: 728

Hover on button shows different text that isn't as wide. How to prevent changing button width?

I'm wondering how i can have a button retain its width on hover. I want to use css for the transitions as opposed to a jQuery solution.

So how do I do this? I'd love it if there were a pure css implementation but I'll settle for jQuery if I have to.

Edit: min-width won't work since the button text is dynamic.

Here's a fiddle.

$(function() {
  $('button')
    .on('mouseover', function() {
      $(this).find('.btn-text').toggleClass('hidden');
      $(this).find('.options').toggleClass('hidden');
    })
    .on('mouseout', function() {
      $(this).find('.btn-text').toggleClass('hidden');
      $(this).find('.options').toggleClass('hidden');
    });
});
button {
  height: 60px;
  padding: 0 25px;
  line-height: 60px;
  background-size: 100% 200%;
  transition: all 0.1s;
  background-image: linear-gradient(to top, green 50%, white 50%);
}
button:hover {
  color: white;
  background-position: 0 100%;
}
.options {
  font-size: 13px;
}
.hidden {
  display: none;
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button">
  <span class="btn-text">Button Thing</span>
  <span class="options hidden">Go</span>
</button>

Upvotes: 0

Views: 61

Answers (3)

jameson
jameson

Reputation: 201

Adding a CSS solution, since my jQuery solution didn't work correctly.

I changed the .hidden class to use opacity and then absolutely positioned the option text. This will only work if the option text is always shorter than the initial text, of course.

jsfiddle

button{
  height: 60px;
  padding: 0 25px;
  line-height: 60px;
  background-size: 100% 200%;
  transition: all 0.1s;
  background-image: linear-gradient(to top, green 50%, white 50%);
  position: relative;
}

button:hover {
  color: white;
  background-position: 0 100%;
}
.options{
  font-size: 13px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.hidden{
  opacity: 0;
}

Upvotes: 2

jameson
jameson

Reputation: 201

The simplest solution would probably be to add the following jQuery, where you add an inline width to the button.

$(function() {
  $('button')
    var width = $(this).width();
    .on('mouseover', function() {
      $(this).css('width',width);
      $(this).find('.btn-text').toggleClass('hidden');
      $(this).find('.options').toggleClass('hidden');
    })
    .on('mouseout', function() {
      $(this).find('.btn-text').toggleClass('hidden');
      $(this).find('.options').toggleClass('hidden');
    });
});
button {
  height: 60px;
  padding: 0 25px;
  line-height: 60px;
  background-size: 100% 200%;
  transition: all 0.1s;
  background-image: linear-gradient(to top, green 50%, white 50%);
}
button:hover {
  color: white;
  background-position: 0 100%;
}
.options {
  font-size: 13px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;

}
.hidden {
  display: none;
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button">
  <span class="btn-text">Button Thing</span>
  <span class="options hidden">Go</span>
</button>

Upvotes: 1

silviagreen
silviagreen

Reputation: 1729

You have to fix the width: width:25%; in .button

Result: jsfiddle

.button{
 height: 60px;
 padding: 0 25px;
 line-height: 60px;
 background-size: 100% 200%;
 transition: all 0.1s;
 background-image: linear-gradient(to top, green 50%, white 50%);
  width:25%;
}

Upvotes: 0

Related Questions