Skip to content

Instantly share code, notes, and snippets.

@panmirek

panmirek/index.html

Created Jun 30, 2018
Embed
What would you like to do?
underlined button 2
<div class="container">
<button class="btn btn-underline">
<span>underlined button</span>
<i class="motion-container" aria-hidden="true"></i>
</button>
</div>
/* choose color number (1-9) */
$choose-color: 1
$colors: #56e, orange, red, pink, blue, lightgreen, violet, black, grey, purple
$font-family: "Varela Round"
$line-bottom-margin: .63em
$btn-background: nth($colors, $choose-color)
$text-color: lighten($btn-background, 53%)
@import url('https://fonts.googleapis.com/css?family=Varela+Round')
html,
body
height: 100%
.container
display: flex
align-items: center
justify-content: center
height: 100%
font-size: 1.5em
background: lighten($btn-background, 45%)
.btn
padding: 1em 2em 1.5em
border: none
border-radius: .5em
font-family: $font-family
&-underline
background-color: $btn-background
color: $text-color
text-shadow: 0 0 5px darken($btn-background, 35%)
box-shadow: 0 0 25px transparentize($btn-background, .7)
position: relative
border: solid .3em lighten($btn-background, 51%)
transition: .15s ease-in-out
&:hover
background-color: lighten($btn-background, 2%)
&:focus
outline: none
background-color: desaturate(darken($btn-background, 15%), 35%)
&:active
outline: none
box-shadow: 0 0 5px transparentize($btn-background, .7)
background-color: desaturate(darken($btn-background, 35%), 35%)
border-width: .25em
.motion-container
&::before,
&::after
width: 10px
bottom: .35em
&::before
transform: rotateZ(45deg)
margin-left: 1px
left: calc(50% - 12px)
&::after
transform: rotateZ(-45deg)
margin-right: 1px
.motion-container
position: absolute
bottom: .25em
width: 100%
left: 0
height: #{ $line-bottom-margin + .3 }
overflow: hidden
&::before,
&::after
content: ' '
position: absolute
width: calc(50% - 2em)
height: 0px
border-bottom: solid 3px darken($text-color, 15%)
bottom: $line-bottom-margin
transition: all .3s
box-sizing: border-box
border-radius: 3px
&::before
margin-left: 2px
left: 2em
transform-origin: 100% 100%
&::after
margin-right: 2px
left: 50%
transform-origin: 0% 100%

underlined button 2

Customizable buttons with detailed motion, written with sass + html. Select your favorite color theme by choosing number from 1 to 10 in $choose-color variable.

A Pen by Jan Mirecki on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment