JSFiddle - React, Tailwind, and code Playground

by Anav02

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Fancy CSS Button Hover</title>
</head>
<body>
<button ><span>Like!</span><div class="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
  <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
</svg>
</div></button>
<button><span>Share!</span><div class="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
  <path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
</svg>
</div></button>
        <button ><span>Save!</span><div class="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
  <path fill-rule="evenodd" d="M6.32 2.577a49.255 49.255 0 0111.36 0c1.497.174 2.57 1.46 2.57 2.93V21a.75.75 0 01-1.085.67L12 18.089l-7.165 3.583A.75.75 0 013.75 21V5.507c0-1.47 1.073-2.756 2.57-2.93z" clip-rule="evenodd" />
</svg>
</div></button></body>
</html>

CSS

:root {
    --main:#38b6ff;
    --accent:#282a30;
}

* {
    padding: 0;
    margin: 0;
    outline: none;
}

body {
  background-color: #282a30;
  height:100vh;
  display:flex;
  flex-direction: column;
  justify-content: space-evenly;
    
}

button {
    overflow: hidden;
    border-radius: 5px;
    position: relative;
    font-size: 1rem;
    margin: 10px  auto;
    cursor: pointer;
    border: 2px solid var(--main);
    color: white;
    display: flex;
    align-items: center;
    width: 150px;
    justify-content: space-between;
    background-color: var(--accent);
}

.icon {
    background-color: var(--main);
    padding: 10px;

    z-index: 2;
    color: var(--accent);
}

span {
    padding: 0px 30px;
    color: var(--main);
    transition: all .3s ease .5s;
    z-index: 2;
}

button:after {
    position: absolute;
    content: "";
    right:  0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: var(--main);
    transform-origin: right;
    transition: all .7s ease;
    z-index: 1;
    transform: scale(0,1);
}

button:hover:after {
    transform: scale(1,1);
}

button:hover span{
    color: var(--accent);
}

svg{ 
height:20px;
width: 20px;
}