Three Sharing Button Effects

JADE
.container .box-1 h1 hover me .share-buttons a.btn.facebook(href='#') i.fa.fa-facebook | a.btn.twitter(href='#') i.fa.fa-twitter | a.btn.google(href='#') i.fa.fa-google | .box-2 .layer .inner h1 hover me | a.btn.facebook(href='#') i.fa.fa-facebook | a.btn.twitter(href='#') i.fa.fa-twitter | a.btn.google(href='#') i.fa.fa-google .box-3 h1 hover me .share-buttons a.btn.facebook(href='#') i.fa.fa-facebook | a.btn.twitter(href='#') i.fa.fa-twitter | a.btn.google(href='#') i.fa.fa-google | .layer
SCSS
html, body { width: 100%; height: 100%; margin: 0; font-family: 'Bungee', cursive; background: #7474BF; background: linear-gradient(to left, #7474BF , #348AC7); } .container { display: flex; flex-direction: column; justify-content: center; align-items: center; } h1 { margin: 0; text-transform: uppercase; color: #fff; } div[class*=box] { width: 600px; height: 400px; overflow: hidden; position: relative; margin-bottom: 60px; box-shadow: 6px 5px 30px -4px rgba(0,0,0,0.55); } .btn { width: 50px; height: 50px; background: #333; text-align: center; padding-top: 8px; box-sizing: border-box; &.facebook { background-color: #3b5998; } &.twitter { background-color: #55acee; } &.google { background-color: #dd4b39; } .fa { font-size: 35px; color: #fff; } } /* ========================= BOX ONE ========================= */ .box-1 { background-color: #67AAF9; margin-top: 60px; display: flex; justify-content: center; align-items: center; .share-buttons { display: flex; justify-content: space-around; align-items: center; position: absolute; top: 50%; left: 50%; border: 1px solid transparent; width: 0; height: 0; z-index: 10; transition: all 0.4s 0s, border 0.4s 0.6s, height 0.4s 0.4s, margin 0.4s 0.4s; } &:hover .share-buttons { height: 200px; width: 400px; margin-top: -100px; border-color: #dbdbdb; background-color: rgba(196, 224, 249, 1); transform: translateX(-200px); transition: all 0.4s 0.4s, border 0.4s 0s, height 0.4s 0s, margin 0.4s 0s; } .btn { opacity: 0; } &:hover .btn { opacity: 1; transition: 0.4s; transition-delay: 0.7s; } } /* ========================= BOX TWO ========================= */ .box-2 { background: rgba(196, 224, 249, 1); .layer { position: absolute; top: 0; left: 0; height: 300px; transition: 0.4s 0.8s; } &:hover .layer { transition: 0.4s 0s; transform: translateY(250px); } .layer .inner { background-color: #B95F89; width: 600px; height: 400px; position: relative; z-index: 5; display: flex; justify-content: center; align-items: center; } .btn { position: absolute; top: 10px; opacity: 0; z-index: 2; } &:hover .btn { opacity: 1; transform: translateY(-150px); } .facebook { left: 20%; transition: 0.4s 0.6s; } .twitter { left: 45%; transition: 0.4s 0.4s; } .google { left: 70%; transition: 0.4s 0.2s; } } /* ========================= BOX THREE ========================= */ .box-3 { background-color: #2EC0F9; transition: 1s; display: flex; justify-content: center; align-items: center; &:hover .share-buttons { opacity: 1; padding: 0 18%; } .share-buttons { position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.4); width: 100%; height: 100%; opacity: 0; transition: 0.4s; z-index: 10; } .btn { display: inline-block; margin: 175px 40px; } }
JAVASCRIPT
Expand for more options Login