outline-offset animation for bouton CSS-CodePudding

How can I do this animation?

I did it with outline-offset border on hover I don't know how to make the animation.

.orange-button {
  width: 137px;
  height: 35px;
  background: #C09E50;
  color: #F7F7F5;
  border-radius: unset;
  border: unset;
}

.orange-button:hover {
  color: white;
  background: #B18D3A;
  outline: 2px solid #C09E50;
  outline-offset: 2px;
}

<div >
  <button  type="button">Zxxx</button>
</div>

CodePudding user response：

This should help you:

.orange-button { /*This is your basic style for your button*/
  width: 137px; 
  height: 35px;
  background: #C09E50;
  color: #F7F7F5;
  position: absolute;
  border: none;
}

.orange-button:hover { /* This is your style of button on hover */
  background: #B18D3A;
  cursor: pointer;
}

.orange-button::before { /* This is the first line */
  content: "";
  position: absolute;
  top: -4px; /* Starting at the top away from the button by 4px (2px of the thickness plus the 2px of the offset */
  left: -4px; /* Starting at the left away from the button by 4px (2px of the thickness plus the 2px of the offset */
  width: 0; /* The width and height are both 0 so it is not visible at the start */
  height: 0;
  background: transparent;
  border: 2px solid transparent;
}

.orange-button:hover::before {
  animation: animate 0.5s linear forwards; /* Animate the first line of the border by keyframe animate (bellow), the animation takes 5s , linear meaning it takes the same speed from start to finish */
}

@keyframes animate { /* Defining the animate keyframe for the first line */
  0% {
    width: 0; /* At 0% it starts with 0 width and 0 height (invisible)  */
    height: 0;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  50% {/* At 50% the line in the width of button should be 50% and also in the height of the button  */
    width: 50%;
    height: 50%;
    border-top-color: #C09E50;
    border-right-color: transparent; /* Defining which borders should be visible since it's the first line it should only be the left and top */
    border-bottom-color: transparent;
    border-left-color: #C09E50;
  }
  100% { /* The same thing except you need to add 4px  */
    width: calc( 100%   4px);
    height: calc( 100%   4px);
    border-top-color: #C09E50;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: #C09E50;
  }
}

.orange-button::after { /* The same as before except it starts at the bottom right */
  content: "";
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 0;
  height: 0;
  background: transparent;
  border: 2px solid transparent;
}

.orange-button:hover::after {
  animation: animates .5s linear forwards;
}

@keyframes animates {
  0% {
    width: 0;
    height: 0;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  50% {
    width: 50%;
    height: 50%;
    border-top-color: transparent;
    border-right-color: #C09E50;
    border-bottom-color: #C09E50;
    border-left-color: transparent;
  }
  100% {
    width: calc( 100%   4px);
    height: calc( 100%   4px);
    border-top-color: transparent;
    border-right-color: #C09E50;
    border-bottom-color: #C09E50;
    border-left-color: transparent;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
  <button > <!-- This is your button -->
            Hi
        </button>
</body>

</html>

CodePudding user response：

Use this property:

.orange-button {
  width: 137px;
  height: 35px;
  background: #C09E50;
  color: #F7F7F5;
  border-radius: unset;
  outline: 1px solid transparent;
  outline-offset: 50px;
  transition: 0.2s all ease;
}

.orange-button:hover {
    outline: 1px solid #B63A6B;
  outline-offset: 0;
}