Skip to content

Instantly share code, notes, and snippets.

@dyarfi
Created August 23, 2021 09:03
Show Gist options
  • Select an option

  • Save dyarfi/0900d63dae6f9bc7249c4c835e44240c to your computer and use it in GitHub Desktop.

Select an option

Save dyarfi/0900d63dae6f9bc7249c4c835e44240c to your computer and use it in GitHub Desktop.
button_hover_reveal.scss
/** Body CSS sample **/
body {
background:rgb(255, 247, 233);
}
/** Flatted button %placeholder **/
%btn-flat {
border-radius: 0rem;
}
/** Rounded button **/
.btn-rounded {
border-radius: 5rem;
}
/** Button Iconed **/
.btn {
&-iconed {
transition: .15s ease-in-out;
padding-left: 1.3rem;
padding-right: 1.5rem;
/** Icons Classes **/
/** -- Open Iconic, Font Awesome -- **/
[class~=oi], [class~=fa],
/** -- Since Material, Iconic and Typicons use ::before -- **/
[class~=typcn]::before,
[class~=mdi]::before,
[class~=icon]::before {
opacity: 0;
transform-origin: left right;
transform: translateX(-10px) scale(1.25);
transition: .15s ease-out;
}
/** Span Class **/
[class=spn] {
position: relative;
left:-9px;
transform-origin: left right;
transform: translateX(-9px);
transition: .20s ease-in-out;
}
/** -- Icons on Hover properties -- **/
&:hover {
[class~=oi], [class~=fa],
/** -- Since Material, Iconic and Typicons use ::before -- **/
[class~=mdi]::before, [class~=icon]::before, [class~="typcn"]::before {
opacity: 1;
transform: translateX(0px) scale(.75);
}
/** -- Span on Hover properties -- **/
[class=spn] {
left:0px;
}
}
/** Flatted button **/
&.btn-flat {
@extend %btn-flat;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment