social Share

Social Media Share Button With Gooey Effect Using SVG

Social media sharing button with gooey icon loading effect designed by Sasha. When you click on the share button a bunch of social media icons drops down with a gooey effect. If you are having trouble with the pen, try the archived copy on GitHub Social Media Share Button With Gooey Effect Snippet   HTML <div class=”container”> <div class=”button”>Share</div> <div class=”social twitter”><a href=”https://twitter.com/sa_sha26″ target=”_blank”><i class=”fa fa-twitter”></i></a></div> <div class=”social

Read more
Pure-CSS-Open-Menu-effect

Pure CSS Fullscreen Navigation Menu

This hamburger menu designed by Håvard Brynjulfsen will expand into a full screennavigation menu on click. If you are having trouble with the pen, try the archived copy on GitHub Fullscreen Nav Menu Snippet   HTML %label %input{“type”=> “checkbox”} %span.menu %span.hamburger %ul %li %a{“href”=>”#”} Home %li %a{“href”=>”#”} About %li %a{“href”=>”#”} Work %h1 Click the hamburger icon to view the effect CSS @import url(‘https://fonts.googleapis.com/css?family=Cutive+Mono’); *, *:before, *:after {

Read more
Pure-CSS-Zoom-In-Blocks-On-Hover

Pure CSS Zoom In Blocks On Hover

This snippet designed by Emily Goldfein has a grid layout with a hover effect where the cards zoom in on hover. If you are having trouble with the pen, try the archived copy on GitHub Zoom In On Hover Snippet   HTML <body><div class=”background”><div class=”content”> <div class=”block x1″>Hover Over Me!</div> <div class=”block x2″>Or Over Me!</div> <div class=”block x3″>Try Hovering Here</div> <div class=”block x4″>Last But Not Least</div> <div class=”block

Read more
Fading-text-with-CSS-blend-modes

Fading text with CSS blend modes

A really cool text effect with CSS blend mode designed by Giana. When you hover over the faded text it comes into view. If you are having trouble with the pen, try the archived copy on GitHub Fading Text Snippet   HTML <div class=”wrapper”> <div class=”content”> <h1>Fade away text</h1> <p>Hover over me to reveal the rest. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloremque facere

Read more
Search-Box-Animation

Search Icon to Search Box Animation

When you click on the search icon it expands to a search box. It was designed by Alex Tkachov. If you are having trouble with the pen, try the archived copy on GitHub Search Animation Snippet   HTML <div class=”search-wrapper”> <div class=”input-holder”> <input type=”text” class=”search-input” placeholder=”Type to search” /> <button class=”search-icon” onclick=”searchToggle(this, event);”><span></span></button> </div> <span class=”close” onclick=”searchToggle(this, event);”></span> </div> CSS body { background: #212129; }

Read more