Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ZyYajb
<div class="container">
<div class="follow">
<div class="icon first">&commat;</div>
<div class="icon">&sung;</div>
<div class="icon">&oplus;</div>
<div class="icon last">&phone;</div>
<div class="label">Follow</div>
</div>
<div class="share">
<div class="icon first">&supdsub;</div>
<div class="icon">&starf;</div>
<div class="icon">&empty;</div>
<div class="icon last">&there4;</div>
<div class="label">Share</div>
</div>
<button class="try">
<span class="text">Try</span>
</button>
<button class="buy">
<span class="price"><small>$</small>19</span>
<span class="text">Buy</span>
</button>
</div>
$h-root: 70;
$c-primary: hsl($h-root, 60%, 60%);
$c-primary-text: #111;
$c-secondary: hsl($h-root + 90, 80%, 30%);
$c-secondary-text: #EEE;
html {
background-color: #424148;
font-family: sans-serif;
font-size: 125%;
}
.container {
display: inline-block;
color: $c-primary-text;
padding: 1em;
position: absolute;
top: 50%;
left: 0;
text-align: right;
transform: translateY(-50%);
width: 61.8%;
white-space: nowrap;
@media screen and (max-width: 36rem) {
transform: translateY(-50%) rotate(90deg) translateX(-50%);
}
}
.buy, .try {
vertical-align: middle;
}
.follow, .share {
display: inline-block;
cursor: default;
padding: 0;
margin: 0 .5em;
position: relative;
text-align: center;
&:hover .label {
opacity: 0;
transition: opacity .5s .125s ease-out;
}
&:hover .icon {
border-radius: 1em;
margin: 0 0;
}
}
.icon, .label {
background-color: $c-primary;
line-height: 2rem;
}
.label {
border-radius: 1rem;
position: absolute;
font-size: .618em;
font-weight: 900;
letter-spacing: .0816em;
top: 0;
left: 0;
right: 0;
opacity: 1;
pointer-events: none;
text-transform: uppercase;
transition: opacity .5s .75s ease-out;
}
.icon {
border-radius: 0;
cursor: pointer;
display: inline-block;
height: 2em;
margin: 0 -.5em;
transition:
background-color .5s ease-out,
border-radius .5s .25s ease-out,
margin .5s .25s ease-out;
width: 2em;
&.first {
border-bottom-left-radius: 1em;
border-top-left-radius: 1em;
margin-left: 0;
}
&.last {
border-bottom-right-radius: 1em;
border-top-right-radius: 1em;
margin-right: 0;
}
&:hover {
background-color: $c-secondary;
color: $c-secondary-text;
}
}
button {
appearance: none;
border-radius: 50%;
border: 0;
background-color: $c-primary;
color: $c-primary-text;
cursor: pointer;
font-family: inherit;
font-weight: 900;
letter-spacing: .0816em;
position: relative;
text-transform: uppercase;
transition: background-color .25s ease-out, transform .5s ease-out;
&:hover {
background-color: $c-secondary;
color: $c-secondary-text;
}
}
.try {
font-size: .618rem;
height: 3rem;
width: 3rem;
margin: 0 .5rem;
&:hover {
transform: scale(1.3333);
.text {
display: inline-block;
transform: scale(.75);
}
~ .buy {
transform: scale(.75);
}
}
.text {
transition: transform .5s ease-out;
transform: scale(1);
}
}
.buy {
width: 5rem;
height: 5rem;
background-color: $c-secondary;
color: $c-secondary-text;
&:hover {
}
.price, .text {
transition: opacity .25s ease-out;
}
.price {
font-size: 1.618em;
opacity: 1;
}
.text {
display: block;
font-size: .618em;
font-weight: 900;
letter-spacing: .0816em;
position: absolute;
opacity: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
vertical-align: baseline;
}
&:hover .price {
opacity: 0;
}
&:hover .text {
opacity: 1;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.