0

I have seen not too long ago a button using a cubic-bezier transition on the width property. I really liked how it looked, and how simple it was to recreate it.

Here's a simple version of it that I made : https://codepen.io/Xemros/pen/oNNKjLm

<div class="container">
  <button>Hover me !</button>
</div>


button {
  outline:none;
  background-color: #ABCDFE;
  height: 70px;
  width: 200px;
  border-radius: 2em;
  border:0px;
  color:white;
  font-weight:800;
  font-size:18px;
  transition: width .5s cubic-bezier(0.68, -0.55, 0.265, 1.55),box-shadow .4s;
  box-shadow: 0px 4px 15px -4px rgba(0,0,0,0.35);
}

button:hover {
  width:250px;
}

This already works really well for me, but I would like to take it to a step further. I would like to add more points to my cubic bezier transition to create a "stabilization" effect, so the bounciness at the end feels even more natural. But the css function only takes 4 parameters which are the coordinates for two points. Like so : cubic-bezier(x1,y1,x2,y2).

Here's the tool I use to test my parameters : https://cubic-bezier.com/#.68,-0.55,.26,1.55

And here's a poorly drawn graph to illustrate how I want my transition to behave : https://i.stack.imgur.com/vKD6I.png

Does anyone know a simple way to achieve that in CSS or JS/Jquery ? If there isn't a simple way, what would be the most efficient way to create my transition ?

Martin Matavka
  • 1
  • 1
  • Have you tried combining or recreating this with keyframes? Those give you control over how many and which intermediate steps to take. – Shilly Nov 27 '19 at 17:29
  • @Shilly, that's not a bad idea, I'll try that and let you know if I can get something out of it. Although I must say, I worry about the transition between the keyframe steps, I hope I manage to make it smooth. – Martin Matavka Nov 28 '19 at 08:08
  • @Shilly, I've tried using keyframe as you can see here : https://codepen.io/Xemros/pen/oNNKjLm It's not as smooth as I'd like it to be, but playing with the parameters might help it. The issue with keyframes is that when you stop hovering the button, the animation stops and the transition to go back is not triggered, which doesn't look nice. – Martin Matavka Nov 28 '19 at 09:18

0 Answers0