<h1> Button effects </h1>
<div class="container">
<button class="button type1">
Effect one
</button>
<button class="button type2">
Effect two
</button>
<button class="button type3">
Effect three
</button>
<button class="button type4">
Effect Four
</button>
</div>
<p class="copyright"> By <a href="http://emanuelgsouza.dev">EmanuelG</a> </p>
// Variables
$color: black
$body-color: #ecf0f1
$color1: #566473
$color2: #16a085
$color3: #435a6b
$color4: red
@import url('https://fonts.googleapis.com/css?family=Raleway')
// General configs
*
box-sizing: border-box
body
margin: 0
padding: 0
width: 100%
height: 100vh
display: flex
justify-content: center
align-items: center
flex-direction: column
font-family: Raleway
background-color: $body-color
.copyright
position: absolute
bottom: 0
a
text-decoration: none
color: $color2
&:hover
text-decoration: underline
// Button component
.button
position: relative
padding: 1em 1.5em
border: none
background-color: transparent
cursor: pointer
outline: none
font-size: 18px
margin: 1em 0.8em
&.type1
color: $color1
// Effect one
&.type1::after,
&.type1::before
content: ''
display: block
position: absolute
width: 20%
height: 20%
border: 2px solid
transition: all 0.6s ease
border-radius: 2px
&.type1::after
bottom: 0
right: 0
border-top-color: transparent
border-left-color: transparent
border-bottom-color: $color1
border-right-color: $color1
&.type1::before
top: 0
left: 0
border-bottom-color: transparent
border-right-color: transparent
border-top-color: $color1
border-left-color: $color1
&.type1:hover:after,
&.type1:hover:before
width: 100%
height: 100%
&.type2
color: $color2
// Effect 2
// Inspiration https://tympanus.net/Development/CreativeLinkEffects/
&.type2:after,
&.type2:before
content: ''
display: block
position: absolute
top: 100%
left: 0
width: 100%
height: 2px
background-color: $color2
transition: all 0.3s ease
transform: scale(0.85)
&.type2:hover:before
top: 0
transform: scale(1)
&.type2:hover:after
transform: scale(1)
&.type3
color: $color3
//Effect three
// Effect one
&.type3::after,
&.type3::before
content: ''
display: block
position: absolute
width: 20%
height: 20%
border: 2px solid
transition: all 0.6s ease
border-radius: 2px
&.type3::after
bottom: 0
right: 0
border-top-color: transparent
border-left-color: transparent
border-bottom-color: $color3
border-right-color: $color3
&.type3::before
top: 0
left: 0
border-bottom-color: transparent
border-right-color: transparent
border-top-color: $color3
border-left-color: $color3
&.type3:hover:after,
&.type3:hover:before
border-bottom-color: $color3
border-right-color: $color3
border-top-color: $color3
border-left-color: $color3
width: 100%
height: 100%
&.type4
color: $color4
&::after
content: ''
display: block
position: absolute
height: 2px
width: 0
left: 0
background-color: red
transition: width 0.3s ease-in-out
&::after
bottom: 0
&:hover::after
width: 50px
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.