Skip to content

Instantly share code, notes, and snippets.

@Ratko-Solaja

Ratko-Solaja/toptal-save-public.css Secret

Last active Nov 8, 2016
Embed
What would you like to do?
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