Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<button>hi
  <svg class="icon">
    <rect width="10" height="10" style="fill:blue;stroke:pink;stroke-width:5;">       
  </svg>
</button>
</body>
</html>
 
* {
    box-sizing: border-box;
}
​
button {
    position: relative;
    background: #0066a5;
    color: #fff;
    padding: 20px;
    padding-right: 58px;
    box-shadow: none;
    transition: box-shadow 0.31s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    font-weight: 700;
    overflow: hidden;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0;
    box-shadow: none;
}
​
@keyframes roll-back-rotate {
    49% {
        transform: translateY(-44px) rotate(0deg);
    }
    50% {
        transform: translateY(28px) rotate(0deg);
        opacity: 0;
    }
    51% {
        opacity: 1;
    }
}
​
@keyframes roll-rotate {
    49% {
        transform: translateY(28px) rotate(0deg);
    }
    50% {
        opacity: 0;
        transform: translateY(-44px) rotate(0deg);
    }
    51% {
        opacity: 1;
    }
}
​
.icon {
    position: absolute;
    width: 10px;
    height: 10px;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    animation: roll .4s forwards;
    animation-name: roll-back-rotate;
}
​
button:hover .icon {
    animation-name: roll-rotate;
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers