A Pen by cindy massey on CodePen.
Created
September 19, 2017 22:34
-
-
Save cheerly/85d6fbe7ffba524d6a05bd1b9dbe139f to your computer and use it in GitHub Desktop.
CSS text-stroke effect
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
<div class="page"> | |
<div class="page__demo"> | |
<div class="main-container page__container"> | |
<button class="button button_type1" data-button-label="I'm a button"><span class="button__label">I'm a button</span></button> | |
<button class="button button_type2" data-button-label="I'm a button"><span class="button__label">I'm a button</span></button> | |
</div> | |
</div> | |
<footer class="footer"> | |
<div class="main-container footer__container"> | |
<a href="http://stas-melnikov.ru/donate/" class="footer__link" rel="noopener noreferrer" target="_blank">Liked? Please, look the page</a> | |
<a href="http://stas-melnikov.ru" class="footer__link melnik909" rel="noopener noreferrer" target="_blank">Developed by Stas Melnikov</a> | |
</div> | |
</footer> | |
</div> | |
<a class="youtube" href="https://youtu.be/PrecuDwtGlU" rel="noopener noreferrer" target="_blank" title="watch my code this">watch my code this</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
.button { | |
padding: 8px 25px; | |
position: relative; | |
border: 2px solid #fff; | |
cursor: pointer; | |
background-color: transparent; | |
font-size: 40px; | |
font-family: inherit; | |
color: #fff; | |
text-transform: uppercase; | |
} | |
.button:focus { | |
outline: none; | |
} | |
.button:before { | |
content: attr(data-button-label); | |
overflow: hidden; | |
white-space: nowrap; | |
position: absolute; | |
top: 8px; | |
left: 25px; | |
} | |
.button__label { | |
-moz-text-fill-color: transparent; | |
-webkit-text-fill-color: transparent; | |
-moz-text-stroke: 1px #fff; | |
-webkit-text-stroke: 1px #fff; | |
} | |
.button_type1:before { | |
width: 0; | |
height: calc(100% - 16px); | |
will-change: width; | |
transition: width .5s cubic-bezier(0.96, 0.18, 0.1, 0.88); | |
} | |
.button_type1:hover:before, .button_type1:focus:before { | |
width: calc(100% - 50px); | |
} | |
.button_type2:before { | |
width: calc(100% - 50px); | |
height: 0; | |
will-change: height; | |
transition: height .35s ease-out; | |
} | |
.button_type2:hover:before, .button_type2:focus:before { | |
height: calc(100% - 16px); | |
} | |
/* | |
* button demo styles | |
*/ | |
.button { | |
-webkit-tap-highlight-color: transparent; | |
} | |
@media screen and (max-width: 640px) { | |
.button { | |
padding: 5px 15px; | |
font-size: 30px; | |
} | |
.button:not(:first-of-type) { | |
margin-top: 20px; | |
} | |
.button:before { | |
top: 5px; | |
left: 15px; | |
} | |
.button_type1:before { | |
height: calc(100% - 10px); | |
} | |
.button_type1:hover:before, .button_type1:focus:before { | |
width: calc(100% - 30px); | |
} | |
.button_type2:before { | |
width: calc(100% - 30px); | |
} | |
.button_type2:hover:before, .button_type2:focus:before { | |
height: calc(100% - 10px); | |
} | |
} | |
/* | |
* demo page | |
*/ | |
@media screen and (min-width: 768px) { | |
html { | |
font-size: 62.5%; | |
} | |
} | |
@media screen and (max-width: 767px) { | |
html { | |
font-size: 50%; | |
} | |
} | |
body { | |
font-family: -apple-system, | |
BlinkMacSystemFont, | |
Segoe UI, | |
Roboto, | |
Open Sans, | |
Ubuntu, | |
Fira Sans, | |
Helvetica Neue, | |
sans-serif; | |
font-size: 1.6rem; | |
color: #222; | |
background-color: #9b59b6; | |
margin: 0; | |
-webkit-overflow-scrolling: touch; | |
overflow-y: scroll; | |
} | |
.page { | |
min-height: 100vh; | |
display: flex; | |
flex-direction: column; | |
justify-content: space-around; | |
} | |
.page__demo { | |
flex-grow: 1; | |
display: flex; | |
} | |
.main-container { | |
max-width: 1200px; | |
padding-left: 1rem; | |
padding-right: 1rem; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.page__container { | |
margin: auto; | |
text-align: center; | |
} | |
.footer { | |
padding-top: 1rem; | |
padding-bottom: 1rem; | |
text-align: center; | |
font-size: 1.4rem; | |
} | |
.footer__link { | |
color: #fff; | |
text-decoration: none; | |
} | |
@media screen and (min-width: 361px) { | |
.footer__container { | |
display: flex; | |
justify-content: space-between; | |
} | |
} | |
@media screen and (max-width: 360px) { | |
.melnik909 { | |
display: none; | |
} | |
} | |
.youtube { | |
width: 50px; | |
height: 50px; | |
position: fixed; | |
top: 2%; | |
right: 2%; | |
z-index: 9; | |
background: url("https://stas-melnikov.ru/codepen/icons/youtube_white.svg") | |
no-repeat | |
50%/contain; | |
text-indent: -9999px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment