October 29, 2019 Post has been updated
Yuri Nemets
Button effects social networks for the site
Do you think it is possible to combine social media buttons and images? So that both look very beautiful and creative. Yes, this can be done very well in an interesting way. And not even one, but several. To be more precise, in this article you will find 12 ways to create cool effects for social media buttons when hovering over an image. In some cases, not just pointing is necessary, but also a mouse click, which also adds interactivity. An unusual way to highlight your site by using just such effects when hovering over an image.
See and download all 12 examples from the link below:
Download
By the way, regarding hover effects, there are a couple more articles on this topic on the site:
If you like the effect, use it!
For example, I liked the first effect. Hover over the image below to see the effect.
(point to image)
Quite an attractive way to highlight the most important images both on the site and on a one-page sales site. But, as I already wrote, there are significantly more effects (12!).
Step 1 - HTML
The icons you see on social media buttons use FA (Font Awesome). These icons are connected in one line between the blocks :
| 1 | <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> |
After you have downloaded all the sources, you need to select the effect you like. My effect is in the file index.html. This file also contains all the necessary styles to create the hover effect.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class = "image-effect-fall-back" > <div class = "share-layer" > <a href = "#" class = "share-button share-via-vk" > <i class = "fa fa-vk" > VKontakte</a> <a href = "#" class = "share-button share-via-facebook"> <i class = "fa fa-facebook" > Facebook</a> <a href = "#" class = "share-button share-via-twitter"> <i class = "fa fa-twitter" > Twitter</a> </div> <div class = "image-layer" > <img src = "images/tree.jpg" width = "500" alt = "California surf" > !} </div> </div> |
All the necessary structure is there. All that remains is to set the styles in CSS. Therefore, we move on to the 2nd and, at the same time, the last step.
Step 2 - CSS
Styles are in everyone HTML file between blocks . That is, in each file with different effects, the corresponding styles are located in this block at the top of the document.
You need to take these styles and put them in your styles file:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | .image-effect-fall-back ( width : 500px ; height : 300px ; position : relative ; margin : 0 auto ; -webkit-perspective : 800px ; perspective : 800px ; ) .image-effect-fall-back .image-layer ( position : absolute ; top : 0 ; left : 0 ; height : 300px ; -webkit-transition : 0.6s; transition : 0.6s; z-index : 1 ; ) .image-effect-fall-back :hover .image- layer( -webkit-transform : rotateX(70deg) ; transform : rotateX(70deg) ; overflow : visible ; ) .image-effect-fall-back .image-layer img ( height : 100% ; ) .image-effect-fall -back .image-layer :before ( content : "" ; position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; background : rgba(0 , 0 , 0 , 0.5 ) ; box -shadow : 0 0 100px 50px rgba(0 , 0 , 0 , 0.5 ) ; opacity : 0 ; -webkit-transition : all 0.5s; -webkit-transform : rotateX(114deg) translateZ(-26px) ) translateY(110px ) scale(0.75 ) ; transform : rotateX(114deg) translateZ(-26px ) translateY(110px ) scale(0.75 ) ; -webkit-transform-origin : bottom ; -ms-transform-origin : bottom ; transform-origin: bottom; ) .image-effect-fall-back :hover .image-layer :before ( opacity : 0.3 ; ) .image-effect-fall-back .share-layer( position : absolute ; bottom : 100px ; left : 0 ; width : 100% ; height : 100px ; z-index : 10 ; -webkit-transition : 0.6s ; -effect-fall-back :hover .share-layer ( opacity : 1 ; -webkit-transform : rotateX(0deg) translateY(-70px ) ; transform : rotateX(0deg) translateY(-70px ) ; ) /*styles for all buttons*/.share-button( display : inline-block; text-decoration : none ; color : #ffffff ; padding : 12px ; width : 90px ; border-radius : 2px ; margin : 25px 10px ; ) /*color of social media buttons*/.share-via-vk ( background-color : #4C75A3 ; ) .share-via-facebook ( background-color : #3b5998 ; ) .share-via-twitter ( background-color : #00aced ; ) |
I warn you right away: in some examples jQuery is used, because there, for full effect, you need to click on the image. You just need to take all the JS code that is used on the page with the example you like.
Attention! After you paste the CSS code into your stylesheet, the buttons may not appear exactly the same as in the example. This may be due to the fact that your styles file contains different styles for the elements and classes that are used in the demo.
Conclusion
As a rule, creativity is always welcomed. I think here everyone will be able to choose one effect out of 12 for themselves and use it in the future in their own projects.
- changing the size does not affect the quality,
- display perfectly on all devices, including those with Retina displays,
- application of almost any styles applicable to text, such as background, color, shadows, etc.,
- ease of implementation;
We bring to your attention fonts with social network icons.
1. RONDO SOCIAL ICON FONT
Excellent font icons for some of the most popular social networks and more, but unfortunately the icon for our beloved one is missing.2. Fontello - icon fonts generator
An icon generator with a huge set of ready-made icons. One of the advantages is the ability to select only the necessary icons and generate a font from them, which will have a beneficial effect on page optimization and the loading speed of such a font. Another advantage is the presence of icons for social networks such as VKontakte and Odnoklassniki.
3. Mono Social Icons Font
An ideal solution for quickly integrating font icons into a project, the embed code in CSS, SCSS and HTML example. The only drawback is the lack of popular Russian social networks.
4. Pixeden - Social Icon Pack
Nice icons with a powerful demo page, you can see the beauty of using font icons and styling them with CSS
Welcome to my blog. Today I would like to show you step by step how you can layout in html and css buttons social networks. Let's start from complete zero and in the end we will get the desired result. Forward!
Markup and basic styles
I simply put a hash mark in the link addresses. Of course, when used in reality, each link must have a working address to which the transition will take place.
Let's add these styles for now:
Share (
width: 280px;
margin: 0 auto;
padding: 10px;
background: #D3CDEE;
}
.share i (
margin-right: 15px;
color: black;
text-transform: uppercase;
}
We slightly designed the container for links (sizes, indents, background) and the inscription.
Designing icons
Social (
display: inline-block;
width: 40px;
height: 40px;
background: #bdc3c7;
vertical-align: middle;
margin-right: 10px;
}
With the display: inline-block property, we made sure that our links were converted to block elements, but at the same time retained the ability to stand in a row. Next, we indicate the dimensions and indentation on the right so that the blocks do not fit flush against each other.
Okay, but why do we need vertical-align: middle ? This property will align the text in the container so that it is exactly centered vertically. We will also give our cells some background so that we can visually see them already at this stage. The result was a blank. It's time to finally add icons.
Final stage
All we have to do is place our own icon in each of the prepared blocks, which would identify this or that social network. net. To do this, I suggest using the most the right method– connect a sprite image and, using background positioning, put everything in its place.
In short, we need such an image. For me it's about 120 to 40.
We add the following rules to the CSS styles:
Social-vk(
background: url(icon.png);
}
.social-fb(
background: url(icon.png) -40px 0;
}
.social-tw(
background: url(icon.png) -78px 0;
}
The output is a fully designed block with icons.
Do you understand how we got this? If not, then I'll explain. Each link block has a size of 40 by 40. Accordingly, when we give it a background image of 120 by 40, the block simply cannot contain it completely, and as a result it contains as much as it can.
By default, in this case, the first 40 pixels of the width and height of the background image will be taken, but everything is fine with the height - the image completely fits into the blocks in height. Accordingly, all that remains is to specify the background position for the Facebook and Twitter icons.
By writing in the background like this: background: url(icon.png) -40px 0 , we explicitly indicate that for the social-fb block, the background image should be displayed exactly from the specified position - forty pixels in width to the left and in height without offset, because it's not needed. It's that simple, really.
What else can you do?
Maybe you would like to add some additional design to the social network block. There are several ideas. First, you can add rounded corners to all icons.
Social(
Border-radius: 5px;
}
Secondly, you can add a frame to them.
Border: 3px solid purple;
In terms of design, purple will suit us in this case, it seems to me. You can also round the corners of the link container itself.
Again, there are many design options. And, of course, you can easily change the colors. In this article I offer you this design option, but now you can easily make it your own: yellow, green, red and any other icons.
Bottom line
As you can see, you can very easily add it to the site even yourself social buttons, and html and css will help us with this. At least visually, we can design our icons as needed for the design of each specific site.
This concludes today’s article-lesson. Next time we'll create something else using CSS
We present to your attention the TOP 30 best sets of social network icons for your website, blog, online store or other web resource.
Since each site has its own style, focus and target audience, choosing suitable icons can be quite difficult.
This selection presents the best icon sets for both universal use, and those that will fit perfectly into even the most unique website design.
Typically, icons are placed in the footer of a website or blog.
Up to 5-6 icons are encouraged.
Old Bottle Crowns Icon Set
Original stylized icons in the form of bottle caps will be an excellent addition to the website of a cafe, bar, or a themed online store.
High-quality drawing of elements and bright design will definitely attract web resource visitors to familiarize themselves with your pages on social networks.
The set consists of 20 icons, each of which is designed as a separate image in PNG format.
Vintage Social Media Stamps
Vintage social media icons will fit perfectly into the theme of a travel website or blog about world attractions. These icons are often used by professional photographers to add social media links to their portfolios.
File formats – PNG, PSD. The resolution of each icon is 256x256px.
Wooden Social
The set consists of ten social media icons.
There is also a picture for RSS feed and email subscription.
Each of graphic documents The archive has its own resource file, with which you can edit the picture yourself or save it in another format.
The default format is PNG.
SocialMate
The set is universal and suitable for use on any website or web project.
For personalized file editing, an original PSD file is included with each item.
The resolution of the pictures is 128x128px, 64x64px and 32x32p.
Vector 3D Social Icons
3D icons from Vector represent a complete set of elements for the footer of your website, which is distributed completely free of charge.
A bright and memorable design will attract new subscribers to your pages on social networks.
File format is PNG (plus original PSD document). Resolution - 256x256px.
Social Sketches
Social Sketches is free set original sticker icons for clickable links to social networks.
The unique type of images will attract the attention of resource users.
Set contents:
- 16 icons;
- 6 different resolutions for each element (32px, 48px, as well as 64px, 128px, 256px, and 512px);
- Standard PNG format.
Socialize
Socialize is a set of 12 neat round icons for social networks. Please note that each site offers several images at once.
This way, you can choose the most suitable element to suit the style of your website or blog.
Vector type images are saved in SVG format.
Somacro
Somacro is 45 high-quality icons for all popular social media, including, Facebook , Twitter, Steam, as well as payment systems Paypal, Webmoney.
A large number of icons will allow you to design the footers of a large online store or personal website in the same style.
File resolution is 500×500 pixels. Each picture is available with or without a frame, resulting in a total of 90 different files.
Bulb Social Media Icons
Bulb Icons is a popular set of icons for science-themed resources.
The interesting design of each picture will fit perfectly into a block about science, interesting facts, technology.
Fig.9 
Transparent Social Media Icons
The icon goes well with any website, regardless of its design and theme.
A suitable set for lovers of minimalism.
The only thing is that the pictures may blend in with too light a background.
Available sizes: 48, 56, 72, 96, 128, 256 and 512 px. The number of images in the archive is 40.
Circle Flat Icons Retina-ready
Each picture has a bright color scheme and displays the style of each social network.
The set contains 65 unique images for websites, popular programs, playgrounds and other instruments.
Social Media Icon Stickers
Bright icons for websites from Vectezy will become great tool to attract users to social pages your company.
Pictures can be used independently of the general design of web pages.
They will look equally good on both dark and light backgrounds.
Shaded Social Media Icons
The Shaded Social Media Icons pack contains 40 images with shadow effect.
Bright design is perfect for use on sites with light design.
The archive can be downloaded in two variations.
The first one has free license, the second contains the source code and is sold for $3.
Available resolutions are 48, 56, 72, 96, 128 and 256 px. Format - PNG.
Simple Line Icons
All images are only available in white, so the set should be used on footers with a dark background.
Not only icons of popular sites are available, but also images for payment systems, Wi-Fi and many others.
Iconmonstr
Iconmonstr is a whole resource where the developer regularly publishes his unique icons for websites.
Among more than 500 pictures you will find black and white icons for any website or tool.
All files can be downloaded for free.
Also, on the resource page you can select your preferred resolution and file format.
Social Media Long Shadow Icon Set
Social Media Long Shadow Icon Set contains 35 files for different social networks. Each icon has a square shape, is made in the colors of the designated resource and is perfect for sites of any type.
The archive contains only files in PNG format.
Material Design Social Icons
8 vector icons in SVF format will allow you not only to complement your site with attractive clickable links, but also to make your own adjustments to the file. You can change the resolution, add a shadow, change the color, adjust the transparency and much more.
Images are available for Instagram, YouTube Facebook, Pinterest, Linkedin, Skype, Google+.
Picons Social
Picons Social is a professional social media icon pack with over 60 different images.
All pictures are made in black and white format and have a pleasant and “light” design.
Excellent for universal use on sites with light design.
The archive has several formats available for each icon:
- .PSD;
- .EPS;
- .PDF;
- .PNG;
- .EMF.
Circle & Round Social Media Icons
16 social media icons will be a great addition to your website.
Bright design will allow you to beautifully highlight the field of links to pages in other resources.
The size of each image is 58 and 40 pixels.
Also, there are sources for editing in Photoshop.
Flat Minimalistic Social Media Icons
The archive contains 85 minimalist, non-volume icons for social networks.
Each of the pictures has 4 different styles, which allows you to choose the best design that fits into the design of the web page.
Icons come in two formats: PNG and SVG.
Color and black and white versions available.
Hex Social Media Icons
This set of icons is made in the form of hexagons.
The developer transferred the color scheme to each social network.
On the developer's website you can download each icon separately, after selecting its format and resolution.
A total of 32 unique designs are available.
Flat Social Media Icon Vector Pack
There are icons for video hosting, RSS, payment systems, and sections of a blogger’s website.
Also, the set contains icons for HTML5 and CSS.
File format - Png. Resolution – 58 pixels.
Advanced Flat Social Media Icons
Each icon has a shadow effect and is made in bright colors.
Available sizes are 72, 96, 128, 256 and 512 px.
Each element is available in design for light and dark tones of the site.
iOS Style Social Media Icons
Download the archive from the developer’s website and get the source code for personal editing of the content.
Available formats are .EPS and .AI.
Grunge Flat Social Icons
Wonderful icons in Grunge style are best choice for the website of a dance studio, gym, music portal, record company, as well as other organizations and resources whose style is made in an urban direction.
Each file is available in PSD format.
Geometric Social Media Icons
Free icons for social media, which are made in a geometric style, will be a good addition to a cosmetics store, perfumery store, or blog.
The standard color scheme of icons is made in light halftones.
Also, you can choose brighter or darker styling options.
All of them are available in one archive.
Rogie Social Media Icons
A set of icons from a famous web illustrator will highlight the individuality of the web resource and attract even more subscribers to your social media.
All pictures are made separately in color and black and white.
Playground images available, cloud storage and social networks.
Adobe Muse Icons
Vector icons from Adobe are one of the best options for designing a minimalist footer.
The set includes 60 images of popular sites, mobile operating systems, cloud storage, payment systems and other popular web resources.
120 Hand Drawn Social Media Icons
By downloading this set, you will receive 120 unique hand-drawn social media icons.
Each image has a successful design and clear drawing of lines.
It will fit well into the design of a DIY website or any other resource dedicated to creativity.
Available formats are PNG and SVG.
Hello, dear readers of the blog site. You can, of course, use a plugin for this task, but It's not that hard to do it yourself, and there will be fewer of them, especially since I already have a lot of them working (see the article at the link provided). I took the social network icons from, which I already wrote about in some detail (I hope that Dimox will not object to this).
And I also considered it appropriate to send an email.
We create a sprite from buttons and insert the Html code into the site
After everything necessary groups and you have created pages on social networks, which means you have received all the necessary links, you can be puzzled by adding buttons to the site. You can, of course, in accordance with my post about, select a suitable icon for each social network and, if necessary, reduce its size to the required size in and.
But it's not best option. Why? Well, because to load each social network image, a separate request will be made to your server. If you have a dozen icons, that means ten requests, which in any case will create additional load on the server and . Such wastefulness does not suit us, especially since it has been happening for a long time.
I decided not to reinvent the wheel (create a sprite), but used the one created by the Share42 constructor (a link to a description of working with it is given just above). In it you can select those social networks whose icons you will need, and along with the code you will receive a CSS sprite, i.e. physically alone graphic file, on which all the social network icons you need and subscriptions to the RSS feed (and Email, if required) will be placed.
I chose four main networks and a couple of icons for subscribing to news with an icon size of 24 by 24, so my sprite looks like this (though it’s still stuck in there, but it doesn’t matter):
Now we have all the ingredients - links to groups or social network pages and icons for displaying them on the site. All that remains is to prepare it all correctly, i.e. make up. My blog runs on WordPress, so I will paste the code with the buttons into one of the . In my case it is called sidebar.php. HTML code this turns out to be extremely simple:
Well, and the most interesting thing. With our help, we determine which area of our sprite will be displayed at this specific location as a background (in our case, this background is placed under the hyperlink). It takes a very long time to explain how this happens, so read the article linked to the link and everything will become clear (it also provides illustrative examples). If you are lazy, then just experiment with the numbers, which, as you may have noticed, are not divisible by 24 for nothing.
Yes, upload the sprite file via FTP to your website and indicate the path to it () in the background. That's it. If it doesn’t work out, read more carefully the materials on the links above, well, and if nothing works out at all, then describe your situation in the comments (in detail - to insert the code, remember to enclose it in PHP tags with square brackets).
Good luck to you! See you soon on the pages of the blog site
You might be interested
