app/assets/stylesheets/blocks/_button-minimal.scss
.button--minimal {
margin: 0;
padding: 0;
border-width: 0;
border-color: transparent;
background: transparent;
font-weight: 400;
cursor: pointer;
position: relative;
font-size: 20px;
font-family: inherit;
padding: 5px 12px;
overflow: hidden;
border-width: 0;
border-radius: 4px;
background: transparent;
-webkit-transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.button--minimal:after {
position: absolute;
bottom: 0;
left: 10px;
width: calc(100% - 20px);
height: 1px;
background: lighten(#777, 20%);
content: '';
opacity: 0.65;
-webkit-transition: opacity 0.5s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: opacity 0.5s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: transform 0.5s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: transform 0.5s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.5s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.button--minimal:before {
position: absolute;
bottom: 0;
left: 10px;
width: calc(100% - 20px);
height: 1px;
background: lighten(#777, 20%);
content: '';
opacity: 0.65;
-webkit-transition: opacity 0.5s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: opacity 0.5s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: transform 0.5s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: transform 0.5s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.5s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.button--minimal:hover,
.button--minimal:focus {
opacity: 0.9;
}
.button--minimal:hover:after,
.button--minimal:focus:after {
opacity: 1;
-webkit-transform: translateX(-10px) rotate(0.001deg);
transform: translateX(-10px) rotate(0.001deg);
}
.button--minimal:hover:before,
.button--minimal:focus:before {
opacity: 1;
-webkit-transform: translateX(10px) rotate(0.001deg);
transform: translateX(10px) rotate(0.001deg);
}