Skip to content

Instantly share code, notes, and snippets.

@enasellithy

enasellithy/twinky-btn.css

Last active August 25, 2016 12:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save enasellithy/e15bcba7d2436a4b1377d5b70765fa36 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save enasellithy/e15bcba7d2436a4b1377d5b70765fa36 to your computer and use it in GitHub Desktop.
Download ZIP
button new hover(twinky)
Raw
twinky-btn.css
.transition, .icon-btn-red, .icon-btn-sky, .icon-btn-purple, .icon-btn-pink, .icon-btn-green, .icon-btn-light {
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.icon-btn-red {
font-weight: bold;
color: #FFF;
width: 160px;
height: 40px;
border-radius: 10px;
border: 1px solid #BF1727;
background-color: #BF1727;
}
.icon-btn-red:hover {
background-color: transparent;
border: 1px solid #BF1727;
color: #BF1727;
}
.icon-btn-sky {
font-weight: bold;
color: #FFF;
width: 160px;
height: 40px;
border-radius: 10px;
border: 1px solid #1081CE;
background-color: #1081CE;
}
.icon-btn-sky:hover {
background-color: transparent;
border: 1px solid #1081CE;
color: #1081CE;
}
.icon-btn-purple {
font-weight: bold;
color: #FFF;
width: 160px;
height: 40px;
border-radius: 10px;
border: 1px solid #590789;
background-color: #590789;
}
.icon-btn-purple:hover {
background-color: transparent;
border: 1px solid #590789;
color: #590789;
}
.icon-btn-pink {
font-weight: bold;
color: #FFF;
width: 160px;
height: 40px;
border-radius: 10px;
border: 1px solid #EE20F0;
background-color: #EE20F0;
}
.icon-btn-pink:hover {
background-color: transparent;
border: 1px solid #EE20F0;
color: #EE20F0;
}
.icon-btn-green {
font-weight: bold;
color: #FFF;
width: 160px;
height: 40px;
border-radius: 10px;
border: 1px solid #2DC30D;
background-color: #2DC30D;
}
.icon-btn-green:hover {
background-color: transparent;
border: 1px solid #2DC30D;
color: #2DC30D;
}
.icon-btn-light {
font-weight: bold;
color: #FFF;
width: 160px;
height: 40px;
border-radius: 10px;
border: 1px solid #0DDED4;
background-color: #0DDED4;
}
.icon-btn-light:hover {
background-color: transparent;
border: 1px solid #0DDED4;
color: #0DDED4;
}
Raw
twinky-btn.html
<button class="icon-btn-red">Click</button>
<button class="icon-btn-sky">Click</button>
<button class="icon-btn-purple">Click</button>
<button class="icon-btn-pink">Click</button>
<button class="icon-btn-green">Click</button>
<button class="icon-btn-light">Click</button>
Raw
twinky-btn.scss
.transition {
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
@each $btn, $background-color, $hover in
(btn-red, #BF1727, #BF1727),
(btn-sky, #1081CE, #1081CE),
(btn-purple, #590789, #590789),
(btn-pink, #EE20F0, #EE20F0),
(btn-green, #2DC30D, #2DC30D),
(btn-light, #0DDED4, #0DDED4){
.icon-#{$btn} {
font-weight: bold;
color: #FFF;
width: 160px;
height: 40px;
border-radius: 10px;
border: 1px solid $background-color;
background-color: $background-color;
@extend .transition;
&:hover {
background-color: transparent;
border: 1px solid $hover;
color: $hover;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment