Social Media Animated Buttons

Developer
Bryce Snyder
Size
2,438 Kb
Views
42,504
  1. Social Media Animated Buttons Previews
  2. Social Media Animated Buttons HTML Codes
  3. Social Media Animated Buttons CSS Codes
  4. Social Media Animated Buttons JS Codes

How do I make an social media animated buttons?

A easy way to give your social media buttons a different feel with animates.If you want to use this plugin, just copy the selected social media icon HTML you'd like and the CSS, change the a href's link to your desired url and voila!. What is a social media animated buttons? How do you make a social media animated buttons? This script and codes were developed by Bryce Snyder on 28 July 2022, Thursday.

Social Media Animated Buttons Previews
IQ Test

Social Media Animated Buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Social Media Animated Buttons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <h1>Simple Social Media Icons</h1> <!-- You do not need to copy the container--> <!-- FACEBOOK --> <a href="#"> <div class="button"> <img src="http://www.bryce-snyder.com/hosted/color/Facebook.png" height="50" width="50" alt="" /> </div><!--end of button--> </a> <!-- DRIBBBLE --> <a href="#"> <div class="button"> <img src="http://www.bryce-snyder.com/hosted/color/Dribbble.png" height="50" width="50" alt="" /> </div><!--end of button--> </a> <!-- BEHANCE --> <a href="#"> <div class="button"> <img src="http://www.bryce-snyder.com/hosted/color/Behance.png" height="50" width="50" alt="" /> </div><!--end of button--> </a> <!-- DEVIANT ART --> <a href="#"> <div class="button"> <img src="http://www.bryce-snyder.com/hosted/color/DeviantArt.png" height="50" width="50" alt="" /> </div><!--end of button--> </a> <!-- TWITTER --> <a href="#"> <div class="button"> <img src="http://www.bryce-snyder.com/hosted/color/Twitter.png" height="50" width="50" alt="" /> </div><!--end of button--> </a> <!-- RSS --> <a href="#"> <div class="button"> <img src="http://www.bryce-snyder.com/hosted/color/RSS.png" height="50" width="50" alt="" /> </div><!--end of button--> </a> <!-- YOUTUBE --> <a href="#"> <div class="button"> <img src="http://www.bryce-snyder.com/hosted/color/Youtube.png" height="50" width="50" alt="" /> </div><!--end of button--> </a> <!-- LINKEDIN --> <a href="#"> <div class="button"> <img src="http://www.bryce-snyder.com/hosted/color/LinkedIn.png" height="50" width="50" alt="" /> </div><!--end of button--> </a> <!-- TUMBLR --> <a href="#"> <div class="button"> <img src="http://www.bryce-snyder.com/hosted/color/Tumblr.png" height="50" width="50" alt="" /> </div><!--end of button--> </a> <!-- SKYPE --> <a href="#"> <div class="button"> <img src="http://www.bryce-snyder.com/hosted/color/Skype.png" height="50" width="50" alt="" /> </div><!--end of button--> </a> <!-- GITHUB --> <a href="#"> <div class="button"> <img src="http://www.bryce-snyder.com/hosted/color/Github.png" height="50" width="50" alt="" /> </div><!--end of button--> </a> <!-- LASTFM --> <a href="#"> <div class="button"> <img src="http://www.bryce-snyder.com/hosted/color/LastFM.png" height="50" width="50" alt="" /> </div><!--end of button--> </a> <!-- PICASA --> <a href="#"> <div class="button"> <img src="http://www.bryce-snyder.com/hosted/color/Picasa.png" height="50" width="50" alt="" /> </div><!--end of button--> </a> <!-- INSTAGRAM --> <a href="#"> <div class="button"> <img src="http://www.bridgeoffaith.org/instagram-logo.gif" height="31" width="31" alt="" id="img_2"/> </div><!--end of button--> </a>
</div><!--end of container--> <script src="js/index.js"></script>
</body>
</html>

Social Media Animated Buttons - Script Codes CSS Codes

html { background-color:#222; font-family: helvetica;
}
#container { width:690px; height:50px; margin:50px auto;
}
#container h1 { font-weight: normal; color:#fff; text-align:center; color:#356245; padding-bottom:25px;
}
/* ---------- COPY EVERYTHING BELOW LINE ---------- */
.button { transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -webkit-transition:all .25s ease-in-out; float:left; height:30px; width:30px; margin-left:15px; opacity:.5;
}
.button:hover { transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -webkit-transition:all .25s ease-in-out; opacity:1; margin-top:-10px; -webkit-box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, .5); box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, .5);
}
.button img { margin-top:-10px; margin-left:-10px;
}
/* instagram image fix */
#img_2 { margin:0;
}

Social Media Animated Buttons - Script Codes JS Codes

/* NO JS CAUSE IM COOL. NOT. */
Social Media Animated Buttons - Script Codes
Social Media Animated Buttons - Script Codes
Home Page Home
Developer Bryce Snyder
Username brycesnyder
Uploaded July 28, 2022
Rating 3.5
Size 2,438 Kb
Views 42,504
Do you need developer help for Social Media Animated Buttons?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Bryce Snyder (brycesnyder) Script Codes
Name
Pure CSS3 Parallax Menu
Pure CSS Modalbox
Pure CSS3 Viking Mace
Full Screen Application Animation
Dynamic Material Boxes
New Google Loader
Pseudo data attribute CSS manipulations to create a dynamic feed.
Checkbox Only Dynamic Menu Layout
New Instagram Logo Attempt
Flat Banner Single Pseudo Element
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!