<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script async src="https://static.addtoany.com/menu/page.js"></script>
<div class="buttons">
<button class="grow-button readmore" onclick="window.location.href='#'">
<i class="fa fa-align-left flipit"></i><span>Read more</span>
</button>
<button class="grow-button ask" onclick="window.location.href='#'">
<i class="fa fa-heart"></i><span>Donate</span>
</button>
<button class="grow-button" onclick="window.location.href='#'">
<i class="fa fa-share-alt"></i><span>Share</span>
</button>
<button class="grow-button" onclick="window.location.href='#'">
<i class="fa fa-bars"></i><span>Menu</span>
</button>
</div>
body {
background-color: #333;
margin: 0;
padding: 50px;
}
.buttons {
text-align: center;
}
.grow-button {
height: 57px;
border-radius: 114px;
background-color: transparent;
border: 3px solid;
color: #ffffff;
text-align: center;
font-size: 20px;
font-weight: bold;
min-width: 57px;
cursor: pointer;
margin: 5px;
overflow: hidden;
}
.ask {
border-color: #c55035;
background-color: #c55035;
color: #fff;
}
.readmore {
border-color: #26cad3;
background-color: #26cad3;
color: #fff;
}
.grow-button span {
position: relative;
display: inline-block;
overflow: hidden;
opacity: 0;
right: -20;
top: 3px;
letter-spacing: -30px;
transition-property: opacity, right, letter-spacing;
transition: 0.5s ease-in-out;
}
.grow-button:hover span {
position: relative;
padding-left: 10px;
padding-right: 14px;
opacity: 1;
right: 0;
letter-spacing: normal;
transition-property: opacity, right, letter-spacing;
transition: 0.5s ease-in-out;
transition-delay: 0.2s;
}
.grow-button i.fa {
position: relative;
top: -1px;
padding-left: 0;
transition-property: padding-left;
transition: 0.5s ease-in-out;
}
.grow-button:hover i.fa {
padding-left: 10px;
transition: 0.5s ease-in-out;
transition-delay: 0.2s;
}
/*Mobile*/
@media only screen and (max-width: 414px) {
.grow-button {
transition: none !important;
}
.grow-button span {
display: none;
}
.grow-button:hover i.fa {
padding-left: 0;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.