Skip to content

Instantly share code, notes, and snippets.

@RPwnage RPwnage/index.html
Created Sep 14, 2018

Embed
What would you like to do?
Rounded button with cool hover effect
<div>
<a href="http://turn.lv" class="button">Made with &#9825; by Turn</a>
</div>
@import "bourbon";
@import "neat";
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
* {
font-family: "Open Sans", sans-serif;
}
div {
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
}
.button{
background: none;
text-decoration: none;
display: inline-block;
color: #fff;
font-size: em(24);
line-height: 1.2;
padding: em(9, 24) em(24,24);
border-radius: em(30, 24);
min-width: em(30, 24);
text-align: center;
font-weight: normal;
border: none;
position: relative;
vertical-align: middle;
z-index: 3;
overflow: hidden;
&:before{
border-radius: em(30, 24);
content: "";
position: absolute;
z-index: -2;
transition: all 0.3s;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(to right, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* W3C */
}
&:after{
border-radius: em(30, 24);
content: "";
position: absolute;
z-index: -1;
transition: all 0.3s;
width: 0;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(to right, rgba(35,83,138,1) 0%,rgba(167,207,223,1) 100%); /* W3C */
}
&:hover, &:active, &:focus {
cursor: pointer;
&:after{
width: 100%;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.