Created
July 24, 2014 18:12
-
-
Save ggazzo/e5f1bcea8c47d098593a to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href='http://s2.trrsf.com/update-1403010919/fe/zaz-morph/_css/zaz.css' rel='stylesheet' type='text/css'> | |
<div class="title-page"> | |
<span class="title-page__item"><img src="http://p1.trrsf.com/image/fget/sc/51/51/images.terra.com/2012/10/23/cruzeiro.png" alt="Cruzeiro"></span> | |
<h1 class="title-page__item title">Terra</h1> | |
<a href="#teste1" id="teste1" class=" title-page__item buttom"> | |
<span class="buttom__check"></span> | |
<span class="buttom__text">Esse é meu time</span> | |
</a> | |
</div> | |
<a href="#teste1" id="teste1" class="buttom"> | |
<span class="buttom__check"></span> | |
<span class="buttom__text">Esse é meu time</span> | |
</a> | |
<a href="#teste2" id="teste2" class="buttom" data-tooltip="piroca" > | |
<span class="buttom__check"></span> | |
<span class="buttom__text">Sou babacão!</span> | |
</a> | |
<a href="#teste3" id="teste3" class="buttom" data-tooltip="piroca" > | |
<span class="buttom__check"></span> | |
<span class="buttom__text">Sou babacão com o texto enorme!</span> | |
</a> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.3.10) | |
// Compass (v1.0.0.alpha.20) | |
// ---- | |
.title-page{ | |
text-align: center; | |
&__item{ | |
vertical-align:middle; | |
display: inline-block; | |
margin:0 10px; | |
} | |
} | |
.title { | |
font-size: 40px; | |
font-weight: bold; | |
vertical-align:middle; | |
display:inline-block; | |
} | |
* { | |
box-sizing: border-box; | |
font-family: 'Open Sans', sans-serif; | |
} | |
.example{ | |
margin: 50px; | |
} | |
a {text-decoration:none;} | |
.cu { | |
position: inherit !important; | |
} | |
body { | |
margin-top:100px; | |
background: whitesmoke; | |
} | |
.buttom { | |
outline:none; | |
font-family: "OpenSans", sans-serif; | |
background: white; | |
padding: 5px 10px; | |
margin: 0 10px; | |
border-radius:25px; | |
transition: all .2s; | |
border-bottom: 2px solid #ccc; | |
border-top:0; | |
font-size: 11px; | |
text-transform: uppercase; | |
font-weight: 700; | |
color:#65655D; | |
box-shadow: 0px 0px 1px 0px rgba(224, 224, 224, 1); | |
&:hover { | |
box-shadow: 1px 1px 2px 1px rgba(224, 224, 224, 1); | |
text-shadow: 3px 1px 1px #eee; | |
} | |
&:active { | |
border-top: 2px solid #ccc; | |
border-bottom: 0; | |
} | |
&__text { | |
display:inline-block; | |
max-width:300px; | |
transition:all 1s; | |
white-space:nowrap; | |
overflow: hidden; | |
vertical-align: middle; | |
} | |
.a-btn-symbol | |
{ | |
vertical-align: middle; | |
} | |
&:target &__text , | |
&.closed &__text { | |
max-width:0; | |
opacity:0; | |
margin-left: -5px; | |
} | |
&__check { | |
display:inline-block; | |
width:18px; | |
height:18px; | |
vertical-align:middle; | |
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAASCAYAAAC5DOVpAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8yNC8xNDCu6IEAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAABxElEQVQ4jZ2TP0wTYRiHn7sGLS30vlsUIZiD6nmQaE8I2IZoiwEjGqGrCUNlI5cQTK6DC5aRhIGFHTedcNTtM3FgszFx0lQaF1RIEKKck07VXrkT29/2vb83z5v3zxehVVmmjap4fP/h1UJKS6DMSJ7M6CbJvipfvhZYXpEAkaZBuhDcGJNYF6OoqiAeL3D3lk5le6t52L3bTxm4lCLWXh9Nc234p9oUKDOSp7dnBqE1OmUct/T/MF0IBq0NjPNB7gMAP8wy7VDYRG6DfkMjcmwyyzhu2Q+zTJuJ7BvWV58zbAtf+uT4Ism+0PZqD/UP6OZ1iXkBYIa5WcncrAFAb49Bv1Giuyu0vZoUdCGYnpJcHkzR7tvQNw4Oc3yorGEms3R0NIIe4rhrftidyRJDqcecC6wcJonjjjcGI7yvSBSlSjyeD5hJkPbZ3ZtCvt4/DgOofipzdPSKWCyPLqKo/7yYRxSXXgQZf/e883mbg8OXRKNptEQXbW1B+RLHnQ+r4j+a3b0dPlafkehMIzSD06fq3dD2gmEAnufx9t0TEp0GWsKu+4P3KS5thYFOVnasQHHhF+urm61D6nX1So6zZ8TJifAbqMlr+DZJ36cAAAAASUVORK5CYII=); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.title-page { | |
text-align: center; | |
} | |
.title-page__item { | |
vertical-align: middle; | |
display: inline-block; | |
margin: 0 10px; | |
} | |
.title { | |
font-size: 40px; | |
font-weight: bold; | |
vertical-align: middle; | |
display: inline-block; | |
} | |
* { | |
box-sizing: border-box; | |
font-family: 'Open Sans', sans-serif; | |
} | |
.example { | |
margin: 50px; | |
} | |
a { | |
text-decoration: none; | |
} | |
.cu { | |
position: inherit !important; | |
} | |
body { | |
margin-top: 100px; | |
background: whitesmoke; | |
} | |
.buttom { | |
outline: none; | |
font-family: "OpenSans", sans-serif; | |
background: white; | |
padding: 10px 10px; | |
margin: 0 10px; | |
border-radius: 25px; | |
transition: all .2s; | |
border-bottom: 2px solid #ccc; | |
border-top: 0; | |
font-size: 11px; | |
text-transform: uppercase; | |
font-weight: 700; | |
color: #65655D; | |
box-shadow: 0px 0px 1px 0px #e0e0e0; | |
} | |
.buttom:hover { | |
box-shadow: 1px 1px 2px 1px #e0e0e0; | |
text-shadow: 3px 1px 1px #eee; | |
} | |
.buttom:active { | |
border-top: 2px solid #ccc; | |
border-bottom: 0; | |
} | |
.buttom__text { | |
display: inline-block; | |
max-width: 300px; | |
transition: all 1s; | |
white-space: nowrap; | |
overflow: hidden; | |
vertical-align: middle; | |
} | |
.buttom .a-btn-symbol { | |
vertical-align: middle; | |
} | |
.buttom:target .buttom__text, .buttom.closed .buttom__text { | |
max-width: 0; | |
opacity: 0; | |
margin-left: -5px; | |
} | |
.buttom__check { | |
display: inline-block; | |
width: 18px; | |
height: 18px; | |
vertical-align: middle; | |
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAASCAYAAAC5DOVpAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8yNC8xNDCu6IEAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAABxElEQVQ4jZ2TP0wTYRiHn7sGLS30vlsUIZiD6nmQaE8I2IZoiwEjGqGrCUNlI5cQTK6DC5aRhIGFHTedcNTtM3FgszFx0lQaF1RIEKKck07VXrkT29/2vb83z5v3zxehVVmmjap4fP/h1UJKS6DMSJ7M6CbJvipfvhZYXpEAkaZBuhDcGJNYF6OoqiAeL3D3lk5le6t52L3bTxm4lCLWXh9Nc234p9oUKDOSp7dnBqE1OmUct/T/MF0IBq0NjPNB7gMAP8wy7VDYRG6DfkMjcmwyyzhu2Q+zTJuJ7BvWV58zbAtf+uT4Ism+0PZqD/UP6OZ1iXkBYIa5WcncrAFAb49Bv1Giuyu0vZoUdCGYnpJcHkzR7tvQNw4Oc3yorGEms3R0NIIe4rhrftidyRJDqcecC6wcJonjjjcGI7yvSBSlSjyeD5hJkPbZ3ZtCvt4/DgOofipzdPSKWCyPLqKo/7yYRxSXXgQZf/e883mbg8OXRKNptEQXbW1B+RLHnQ+r4j+a3b0dPlafkehMIzSD06fq3dD2gmEAnufx9t0TEp0GWsKu+4P3KS5thYFOVnasQHHhF+urm61D6nX1So6zZ8TJifAbqMlr+DZJ36cAAAAASUVORK5CYII=); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href='http://s2.trrsf.com/update-1403010919/fe/zaz-morph/_css/zaz.css' rel='stylesheet' type='text/css'> | |
<div class="title-page"> | |
<span class="title-page__item"><img src="http://p1.trrsf.com/image/fget/sc/51/51/images.terra.com/2012/10/23/cruzeiro.png" alt="Cruzeiro"></span> | |
<h1 class="title-page__item title">Terra</h1> | |
<a href="#teste1" id="teste1" class=" title-page__item buttom"> | |
<span class="buttom__check"></span> | |
<span class="buttom__text">Esse é meu time</span> | |
</a> | |
</div> | |
<a href="#teste1" id="teste1" class="buttom"> | |
<span class="buttom__check"></span> | |
<span class="buttom__text">Esse é meu time</span> | |
</a> | |
<a href="#teste2" id="teste2" class="buttom" data-tooltip="piroca" > | |
<span class="buttom__check"></span> | |
<span class="buttom__text">Sou babacão!</span> | |
</a> | |
<a href="#teste3" id="teste3" class="buttom" data-tooltip="piroca" > | |
<span class="buttom__check"></span> | |
<span class="buttom__text">Sou babacão com o texto enorme!</span> | |
</a> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment