Stylish Brand Buttons

Developer
Kyle Brumm
Size
8,832 Kb
Views
4,048
  1. Stylish Brand Buttons Previews
  2. Stylish Brand Buttons HTML Codes
  3. Stylish Brand Buttons CSS Codes

How do I make an stylish brand buttons?

Decided to experiment with a different type of button hover effect. Icons used are from http://fontawesome.io and most of the colors came from http://brandcolors.net. What is a stylish brand buttons? How do you make a stylish brand buttons? This script and codes were developed by Kyle Brumm on 07 January 2023, Saturday.

Stylish Brand Buttons Previews
IQ Test

Stylish Brand Buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Stylish Brand Buttons</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='css/https___raw_githubusercon.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <a class="social--facebook" href="#"> <i class="fa fa-facebook"></i> <i class="fa fa-facebook"></i> </a> <a class="social--twitter" href="#"> <i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i> </a> <a class="social--youtube" href="#"> <i class="fa fa-youtube"></i> <i class="fa fa-youtube"></i> </a> <a class="social--vine" href="#"> <i class="fa fa-vine"></i> <i class="fa fa-vine"></i> </a> <a class="social--linkedin" href="#"> <i class="fa fa-linkedin"></i> <i class="fa fa-linkedin"></i> </a> <a class="social--dribbble" href="#"> <i class="fa fa-dribbble"></i> <i class="fa fa-dribbble"></i> </a> <a class="social--flickr" href="#"> <i class="fa fa-flickr"></i> <i class="fa fa-flickr"></i> </a> <a class="social--instagram" href="#"> <i class="fa fa-instagram"></i> <i class="fa fa-instagram"></i> </a> <a class="social--pinterest" href="#"> <i class="fa fa-pinterest"></i> <i class="fa fa-pinterest"></i> </a> <a class="social--spotify" href="#"> <i class="fa fa-spotify"></i> <i class="fa fa-spotify"></i> </a> <a class="social--tumblr" href="#"> <i class="fa fa-tumblr"></i> <i class="fa fa-tumblr"></i> </a> <a class="social--twitch" href="#"> <i class="fa fa-twitch"></i> <i class="fa fa-twitch"></i> </a> <a class="social--foursquare" href="#"> <i class="fa fa-foursquare"></i> <i class="fa fa-foursquare"></i> </a> <a class="social--behance" href="#"> <i class="fa fa-behance"></i> <i class="fa fa-behance"></i> </a> <a class="social--soundcloud" href="#"> <i class="fa fa-soundcloud"></i> <i class="fa fa-soundcloud"></i> </a> <a class="social--github" href="#"> <i class="fa fa-github"></i> <i class="fa fa-github"></i> </a> <a class="social--gplus" href="#"> <i class="fa fa-google-plus"></i> <i class="fa fa-google-plus"></i> </a> <a class="social--reddit" href="#"> <i class="fa fa-reddit"></i> <i class="fa fa-reddit"></i> </a> <a class="social--stumbleupon" href="#"> <i class="fa fa-stumbleupon"></i> <i class="fa fa-stumbleupon"></i> </a> <a class="social--skype" href="#"> <i class="fa fa-skype"></i> <i class="fa fa-skype"></i> </a> <a class="social--yahoo" href="#"> <i class="fa fa-yahoo"></i> <i class="fa fa-yahoo"></i> </a> <a class="social--trello" href="#"> <i class="fa fa-trello"></i> <i class="fa fa-trello"></i> </a> <a class="social--lastfm" href="#"> <i class="fa fa-lastfm"></i> <i class="fa fa-lastfm"></i> </a> <a class="social--digg" href="#"> <i class="fa fa-digg"></i> <i class="fa fa-digg"></i> </a> <a class="social--vk" href="#"> <i class="fa fa-vk"></i> <i class="fa fa-vk"></i> </a> <a class="social--yelp" href="#"> <i class="fa fa-yelp"></i> <i class="fa fa-yelp"></i> </a> <a class="social--android" href="#"> <i class="fa fa-android"></i> <i class="fa fa-android"></i> </a> <a class="social--dropbox" href="#"> <i class="fa fa-dropbox"></i> <i class="fa fa-dropbox"></i> </a> <a class="social--xing" href="#"> <i class="fa fa-xing"></i> <i class="fa fa-xing"></i> </a> <a class="social--delicious" href="#"> <i class="fa fa-delicious"></i> <i class="fa fa-delicious"></i> </a>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Stylish Brand Buttons - Script Codes CSS Codes

$num-items: 30;
*,
*:before,
*:after { box-sizing: border-box;
}
.container { height: 100vh; overflow: hidden;
}
[class^="social--"] { position: relative; display: block; font-size: 4vw; color: rgba(white, 0.25); @include size((100/5) * 1%, (100/ceil($num-items/5)) * 1.005vh); float: left; transition: background 0.5s ease-in-out; background: black; overflow: hidden; @include bp(large) { font-size: 6vw; @include size(25%, (100/ceil($num-items/4)) * 1.005vh); } @include bp(medium) { font-size: 8vw; @include size(33.3333%, (100/ceil($num-items/3)) * 1.005vh); } @include bp(small) { font-size: 10vw; @include size(50%, (100/ceil($num-items/2)) * 1.0051vh); } i { display: block; @include centerer; transition: 0.5s ease-in-out; &:nth-of-type(1) { color: rgba(white, 0.4); opacity: 0; transition: 0; } } &:hover { font-size: 18vw; color: rgba(white, 0.8); @include bp(small) { font-size: 22vw; } i { transition: 0.5s ease-in-out; transform: translate(-50%, -50%) rotate(-22.5deg); &:nth-of-type(1) { font-size: 60vw; color: rgba(white, 0); opacity: 1; transition: 0.5s ease-in-out; transform: translate(-50%, -50%) rotate(-25deg); } } }
}
$profiles: ( facebook: #3b5998, twitter: #00aced, gplus: #dd4b39, youtube: #bb0000, linkedin: #007bb6, instagram: #3f729b, pinterest: #cb2027, vine: #00bf8f, flickr: #ff0084, tumblr: #32506d, vk: #45668e, foursquare: #0072b1, dribbble: #ea4c89, behance: #1769ff, digg: #000000, github: #333333, reddit: #5f99cf, skype: #00aff0, spotify: #7ab800, yahoo: #400191, yelp: #af0606, lastfm: #c3000d, twitch: #6441a5, soundcloud: #ff8800, stumbleupon: #eb4924, trello: #256a92, xing: #026466, dropbox: #007ee5, android: #a4c639, delicious: #3399ff,
);
@each $name, $hex in $profiles { [class*="social--#{$name}"] { @include hoverer(background, $hex, tint($hex, 10%)); @include hoverer(color, tint($hex, 40%), shade($hex, 40%)); }
}
Stylish Brand Buttons - Script Codes
Stylish Brand Buttons - Script Codes
Home Page Home
Developer Kyle Brumm
Username kjbrum
Uploaded January 07, 2023
Rating 3.5
Size 8,832 Kb
Views 4,048
Do you need developer help for Stylish Brand 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!

Kyle Brumm (kjbrum) Script Codes
Name
Vue.js Lazy Loading
3D Orbiting Split Images
Subtle Menu Animation
Simple Tabs Concept
Line Button Hover Effects
Button Hover Effects
Simple Accordion Concept
Wavy Loading Animations
Dotted Menu Concept
CSS3 Stylish Checkboxes
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!