Skip to content

Instantly share code, notes, and snippets.

@Ratko-Solaja
Last active November 8, 2016 11:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Ratko-Solaja/702fb784f23637c3af98c5c2343600b6 to your computer and use it in GitHub Desktop.
Save Ratko-Solaja/702fb784f23637c3af98c5c2343600b6 to your computer and use it in GitHub Desktop.
Style of the button.
/**
* Button
*/
.toptal-save-button {
display: inline-block;
text-decoration: none;
outline: none;
font-size: 0;
line-height: 0;
margin: 0;
padding: 0;
border: none;
box-shadow: none !important;
}
.toptal-save-button span {
display: inline-block;
vertical-align: middle;
}
.toptal-save-button span.toptal-save-icon {
width: 13px;
height: 16px;
background-image: url("../img/save-icon.png");
background-repeat: no-repeat;
background-position: center;
background-size: 13px 16px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.toptal-save-button.saved span.toptal-save-icon {
background-image: url("../img/saved-icon.png");
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.toptal-save-button span.toptal-save-text {
font-size: 14px;
line-height: 16px;
margin-left: 10px;
color: #000;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.toptal-save-button.saved span.toptal-save-text {
color: #4080FF;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.toptal-save-button:before,
.toptal-save-button:after {
content: "";
display: table;
clear: both;
}
/**
* Responsive
*/
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
.toptal-save-button span.toptal-save-icon {
background-image: url("../img/save-icon@2x.png");
background-size: 13px 16px;
}
.toptal-save-button.saved span.toptal-save-icon {
background-image: url("../img/saved-icon@2x.png");
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.toptal-save-button span.toptal-save-icon {
background-image: url("../img/save-icon@2x.png");
background-size: 13px 16px;
}
.toptal-save-button.saved span.toptal-save-icon {
background-image: url("../img/saved-icon@2x.png");
}
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
.toptal-save-button span.toptal-save-icon {
background-image: url("../img/save-icon@3x.png");
background-size: 13px 16px;
}
.toptal-save-button.saved span.toptal-save-icon {
background-image: url("../img/saved-icon@3x.png");
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment