Skip to content

Instantly share code, notes, and snippets.

@cimmanon

cimmanon/SassMeister-input-HTML.html

Created May 19, 2015 15:39
Show Gist options
  • Save cimmanon/3201d74ff8e8a5ab8b77 to your computer and use it in GitHub Desktop.
Save cimmanon/3201d74ff8e8a5ab8b77 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<a class="circle-button">foo</a>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
a.circle-button {
display: block;
text-decoration: none;
&:before, &:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-bottom: 0;
display: block;
}
&:before {
bottom: -33px;
left: 39%;
border-top-color: #b6b6b6;
border-width: 17px;
&:active {
border-top-color: #1c3d73; // THIS IS WHERE I FIGURED IT NEEDS TO BE
}
}
&:after {
bottom: -28px;
left: 40%;
border-top-color: #fff;
border-width: 15px;
}
}
Raw
SassMeister-output.css
a.circle-button {
display: block;
text-decoration: none;
}
a.circle-button:before, a.circle-button:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-bottom: 0;
display: block;
}
a.circle-button:before {
bottom: -33px;
left: 39%;
border-top-color: #b6b6b6;
border-width: 17px;
}
a.circle-button:before:active {
border-top-color: #1c3d73;
}
a.circle-button:after {
bottom: -28px;
left: 40%;
border-top-color: #fff;
border-width: 15px;
}
Raw
SassMeister-rendered.html
<a class="circle-button">foo</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment