How to make a floating button. Floating Add Media Buttons
Buttons for social networks or onLine consultations are found on almost every Internet project today. Some of them are placed directly in the body of the page, while others remain always in view of the user, regardless of scrolling. We will try to create exactly such buttons and blocks in this material using pure CSS.
To ensure that a button or block (hereinafter simply a button) does not change its position regardless of page scrolling - as if floating through the site materials, it needs to be given a position ( position) and place it on top of all elements. But before we move directly to CSS styles Let's create an object for our experiments. Let it be a certain picture, which is the starting point for some action
We've compiled the html code, now let's try to make it float.
And so, we already know that fixed positioning allows the element to maintain its position when scrolling the page, and in order for it to always be in the foreground, it is necessary to set a large numeric value parameter z-index. Let's do this for our button:
.start ( position :fixed ; z-index : 99999 ; ) .start ( left :0 : position:fixed ; top :200 px ; z-index : 99999 ; )If we need to place the button on the right, then instead of left we need to set right, namely:
.start ( position : fixed ; right : 0 ; top : 200 px ; z-index : 99999 ; )If our button needs to be placed at the bottom of the browser window, then replace top with bottom.
This was for a button, but what if we are faced with the task of placing not a button, but a whole block with text or a whole set of buttons. This problem can be solved in a similar way, only the following styles need to be set to the block:
CSS
.block_start ( background : #382d25 ; border : 1 px solid #382d25 ; border-radius : 6 px ; box-shadow : 0 px 0 px 8 px #382d25 ; font-size : 14 px ; padding : 5 px 5 px 0 ; position : fixed ; right : 25 px ; text-align : center ; top :25 px ; width : 96 px ; z-index : 99999 ; )Let us comment on the properties of the parameters. The position of the block was indicated using position: fixed; z-index: 99999; and placed it on the top right - right: 25px; top:25px. The block width (width) is 96 pixels. Its design is specified by the parameters – background, border, border-radius, box-shadow. And finally, so that our text inside the block is placed in the middle and has margins and is the same size, we wrote font-size: 14px; padding: 5px 5px 0; text-align: center.
Theory is good, you thought, but how can this be implemented in reality? For example, let’s say we have two sites - one CMS Joomla, the other is WordPress. Well, let's install it for Joomla
Installation on CMS JoomlaThe html code of the button must be placed in the site template - this is the file index.php, which is located here - your_site/templates/theme/ I most often install the code itself immediately before the tag, but you can place it wherever you see fit, the main thing is that he was between the tags….
Now let's move on to styles. We copy them and place them in the template settings file - as a rule, these are the layot.css, template.css or general.css files of the CSS or styles folder
In the site control panel, on the right, look for the “Appearance” section, then “Editor” and open the footer.php file and add our button html code.
The button design style, in the same way, is placed in the template design file - the style.css file which is located wp-content/themes/your_theme/style.css or through the admin panel, in the “Appearance” -> “Editor” section, file style.css.
And finally, let's make our button "Top" and disappear when the scroll bar is at the very top.
“Back to Top Button” / “Back to Top Button” for the siteIn order for us to be moved to the top when we click on our button, we need to add a java script to the html code
$(function () ( $("#toTop" ).scrollToTop(); ));To avoid confusion, I specifically changed the class to id="toTop". The contents of the toTop.js file are as follows
$(function())($.fn.scrollToTop=function())($(this).hide().removeAttr(“href”);if($(window).scrollTop()!=”0″)($ (this).fadeIn("slow"))var scrollDiv=$(this);$(window).scroll(function())(if($(window).scrollTop()=="0″)($(scrollDiv ).fadeOut("slow"))else($(scrollDiv).fadeIn("slow")));$(this).click(function())($("html, body").animate((scrollTop :0),"slow"))))));
This script hides our button when we are at the top of the site and displays it as soon as we push the scroll bar down. It is also responsible for the page scrolling speed.
Attention! On some sites, this button may not work, but simply add a # symbol to the link in the browser window. In this case, you need to connect jQuery. This can be done using the following line
Now let's look at styles. Since this is the “up” button, place it at the bottom of the window, on the right - bottom and right.
#toTop ( background : none ; bottom : 20 px ; cursor : pointer ; position : fixed ; right : 2 px ; )Well, that's all for sure! I hope you now know what and how to do to set your “ship” sailing.
Hello, dear visitors!
I continue to publish technical articles.
And today I will touch upon interesting topic, in which we will discuss the scroll button to the top of the page on the site. We'll talk about the importance of this button, which is how I like to do it. I will also show you the most interesting and effective implementations of this function.
Is it necessaryI think it’s not worth showing what it looks like on websites, since almost every resource has it. This is a simple button with an up arrow or a word that, when clicked, quickly takes you to the very top area of the site.
This function is an element that, in certain cases, improves the usability of the site. These are the cases in which we will now discuss with you.
The first most important, and maybe the only case when the up button is needed is the presence huge amount content on the page. If the page is long, then it is quite difficult to scroll to the very top.
You either have to use the scroll bar, which few people use. I'm on at least I don’t use it at all, since it’s an extra mouse movement and not very convenient. Or you have to spin the video on the mouse, which takes a very long time and becomes annoying over time.
Therefore, if your site has really large articles, then you can install a button, but you need to make it so that it is easy to click on it and it is easier to do this than spinning a video or using the scroll bar in the browser. Otherwise, what good will it be if it is equivalent to standard actions?
Based on this, there are the most common and most effective scroll up buttons that really work effectively. One such option is the up button, as in social network In contact with. We move on to implementing this method.
Up button like VKontakteA distinctive feature of this button is its ease of use. It looks like a scroll bar on the left side of the site, which occupies the entire height of the resource.
This option has already proven itself, since there are practically no users who do not use it on social media. VKontakte network. This implementation is convenient because you don’t have to aim the mouse cursor at any button. Simply click on the left area of the site and the page will scroll to the very top. There is no need to even watch the cursor; you can simply move the mouse to the very edge of the screen and click once.
It will not be possible to make the exact same implementation as VKontakte, but an approximate version is easy.
To implement it, you just need to place the script on the site.
To load the script, you can place the code itself between tags or before the closing tag in the footer.php file. Or you can simply upload a file with a script to your hosting, and then simply upload the file on the site.
If you want to place the script and not have to worry about loading it, then I’ll give you the script code itself.
JavaScript
$(document).ready(function() ( $("body").append("^ Back to Top"); $ (window).scroll (function () ( if ($ (this).scrollTop () > 300) ( $ (".button-up").fadeIn(); ) else ( $ (".button-up").fadeOut(); ) )); $(".button-up").click(function( )( $("body,html").animate(( scrollTop: 0 ), 100); return false; )); $(".button-up").hover(function() ( $(this).animate (( "opacity":"1", )).css(("background-color":"#E1E7ED","color":"#45688E")); ), function())( $(this).animate (( "opacity":"0.7" )).css(("background":"none","color":"#45688E");; )); ));
$(document). ready(function()( $("body"). append("^Back to Top"); $(window). scroll(function()( if ($(this).scrollTop() > 300)( $(".button-up"). fadeIn(); ) else ( $(".button-up"). fadeOut(); } ) ; $(".button-up"). click(function()( $("body,html") . animate (( scrollTop: 0 } , 100 ) ; return false ; } ) ; $(".button-up"). hover(function()( $(this). animate (( "opacity" : "1" , ) ) . css (( "background-color" : "#E1E7ED" , "color" : "#45688E" ) ) ; ) , function () ( $(this). animate (( "opacity" : "0.7" ) ) . css (( "background" : "none" , "color" : "#45688E" ) ) ; ; } ) ; } ) ;
|
In this code, you can change some parameters to suit your needs.
- Line 4 is responsible for displaying the page scrolling area itself. It contains the basic styles for displaying the button. in principle, these parameters should suit almost everyone. But you may need to edit them to suit yourself;
- In line 7 in brackets there is a number 300, which is responsible for the moment the button appears. That is, the button will appear only after scrolling 300 pixels down. I recommend choosing a value here so that scrolling is possible only when the main site menu or some other important elements in the navigation disappear from view;
- In line 17, the value 100 is the scroll speed. The lower the value, the faster the return to the top of the page.
This code can be placed between tags at the top of the site. If the site is on WordPress then this area is located in the header.php template file. You can also place it before the closing tag at the very bottom of the site (footer.php file). I recommend the last option, as it will speed up the loading of the site. It will look like this.
An even more efficient option is to download this script from separate file. You can download the file using the button below. It is located inside the archive.
Then upload this file to your hosting. You can upload it to the theme folder, or to the root of the site. I, according to tradition, do this in the template folder. Then you should write the code that will load this file in the same place. To do this, use the following line.
JavaScript
|
In it you will need to replace the full path to the file with yours in the second line. Then paste this code in the same area before the closing tag as shown below.
After editing the file, if we did it on a computer, we upload it to the hosting with replacement source file. After this, a simple up button on your site will work.
To edit parameters in this file, you will need to open it using the Notepad editor.
This option very good for its simplicity, both in operation and in installation on the site. A more advanced option is when, in addition to scrolling up, you have the opportunity to return to the place from which you scrolled. This is exactly the option implemented in social media. VKontakte network. How to do it, see below.
The second way to button up from VKontakteBy this method I recorded a detailed video tutorial.
This option is now on my blog. I have not yet been able to analyze its usefulness. But, if it is on one of the giants of the Runet, then we can safely assume that it is of some use. Of course, on such a scale it’s a no brainer. But on a small resource, you can think carefully before installing it. But I look at the future, which is why I made this decision.
The implementation of the second method is a little more complicated, but the process should already be familiar to you if you have done other technical issues on your resource.
Consists of 3 stages:
First, we need to place a script that will make scrolling smooth and color change smoothly when hovering, both the area itself and the color of the owl “To Top”, depending on the distance the page is scrolled down.
You can go in 2 ways, as in the first case. Or place the script itself in desired area(see point above) or download the script via a file. Next, we will do everything through the second method so that it is effective.
Download the script file using the button below.
Place the file on the hosting and upload the file through the code at the very bottom of the site, as you did before. The file is named exactly the same as in method 1, so you can take the same line of code for output.
⇓ Back ⇑ Up
< div class = "leftbar-wrap" > < a href = "#0" id = "scroll-back" > < span class = "active-area" > < span class = "bar-desc-niz" >⇓Back< / span > < / span > < / a > < a href = "#" class = "left-controlbar" > < span class = "active-area" > < span class = "bar-desc-top" >⇑Top< / span > < / span > < / a > |
You can place it at the very bottom of the site, before the closing tag in the footer.php file.
Then we write the design styles in our style file (style.css) and upload all the changed files to the hosting. Here are the styles themselves.
/* description of the container */.leftbar-wrap ( position: fixed; height: 100%; top: 0; width: 99px !important; left: 0; ) /* description of the “Top” button */.left-controlbar ( height : 100%; display: block; text-decoration: none; ) /* description of the “Back” button */#scroll-back ( display: block; height: 100%; top: 0; display: none; text-align: center; ) /* column description background color for both buttons */.active-area ( width: 100px; height: 100%; display: block; text-align: center; ) /* set the transparency of the background color when hovering over the active area of the page */.leftbar-wrap:hover .active-area ( background: #E1E7ED !important; opacity:0.7 !important; ) /* make the backlight a little brighter when hovering over the inscription */.leftbar-wrap .active-area:hover ( ) /* center the inscription at the buttons * /.bar-desc-niz ( top: 26% !important; position: relative; display: inline-block; ) .bar-desc-top ( top: 10% !important; position: relative; display: inline-block; )
/* container description */ Leftbar-wrap ( position: fixed; height: 100%; top: 0; width: 99px !important; left: 0; /* description of the “Up” button */ Left-controlbar( height: 100%; display: block; text-decoration: none; /* description of the “Back” button */ #scroll-back ( display: block; height: 100%; top: 0; display: none; text-align: center; /* Description of the background color column for both buttons */ Active-area ( width: 100px; height: 100%; display: block; text-align: center; /* set the transparency of the background color when hovering over the active area of the page */ Leftbar-wrap:hover.active-area ( background : #E1E7ED !important ; opacity: 0.7 !important; /* make the highlight a little brighter when hovering over the inscription */ Leftbar-wrap .active-area:hover ( /* center the label on the buttons */ Bar-desc-niz ( top : 26% !important ; position: relative; display: inline-block; Bar-desc-top ( top : 10% !important ; position: relative; display: inline-block; |
Depending on the design and structure of your resource, you will need to slightly change some parameters in these styles. For example, in lines 47 and 53, change the indentation parameter for the words “Back” and “Top” from the very top of the page, respectively
After editing all the files, we can safely upload them to the hosting and this method will work. You can see its implementation on my blog. Do it for your health.
We move on to the next method. This option will already contain simple button in the lower right area of the screen, clicking on it will move to the top of the page.
The third method for a back to top button without a pluginThe button implementation is also very simple and works 100% on a WordPress site. I can’t say anything about the HTML site or another engine. Test it.
You need to copy the following code with the script to the very bottom of the site before the closing tag /
JavaScript
$(document).ready(function())( $("#back-top").hide(); $(function () ( $(window).scroll(function () ( if ($(this).scrollTop () > 100) ( $("#back-top").fadeIn(); ) else ( $("#back-top").fadeOut(); ) )); $("#back-top a" ).click(function () ( $("body,html").animate(( scrollTop: 0 ), 400); return false; )); )); ));< p id = "back-top" > < a href = "#top" > < span > < / span > < / a > < / p > |
Present in Leadback a large number of settings that allow you to organize almost any algorithm for the widget’s operation call back. The first settings concern the logic of the widget’s appearance on the site.
Catching calls in no work time— numbers entered during non-working hours will be distributed among managers during working hours. The manager will receive a call and the answering machine will inform him that a call was ordered outside of working hours and will connect him with a potential client.
Catch the visitor on the way out - the widget detects the moment when the visitor is about to leave your site and invites him to contact the manager in 27 seconds.
Floating “Phone” button - there is always a button visible on the website in a certain place, when you click on it you can enter a number and contact the sales department. We recommend using this feature.
Setting up the widget window - You can choose 2 options for displaying the widget: “Window” and “Full screen” options. Also, choose color scheme and change the caption on the widget. We recommend using information about discounts and promotions to motivate the client to leave a contact number.
Callback widget “Full screen”
Setting up a floating button - the section where we configure appearance and button color scheme. The following options are available: Ringer, round button with handset, square button with handset and stylish button with a tube reminiscent of popular messenger icons.
Please note that the color of the button can be matched to the color scheme of your site, and the button can be placed anywhere. There are additional settings for this.
Allow multiple calls for a client - can the same client call you several times? YES/NO The client is determined by the browser.
Change the time “We will call you back in ... seconds” - You can change the time in which you promise to call the client up or down.
Offer a call to 1 client no more than 1 time per... - if you have the “Catch a visitor on the way out” function enabled, you can specify an interval so as not to annoy the visitor with a pop-up window every time.
Receive calls from the CIS and Europe - If you work only for Russian market, we recommend not enabling this feature. If you need clients from other countries, then enable it. For other countries (except Russia), for one minute of conversation the following will be charged: Ukraine - 3 minutes, Kazakhstan - 2 minutes, Belarus - 4 minutes, all other countries - 5 minutes.
Report widget name - If you use multiple widgets on the same domain.
A message will appear. Please note that there is no need to update the code on the site!
Widget setup is complete
After completing the setup in your personal account Leadback Your first widget will appear in the widgets section.
Widget in your personal account
Now you need to install the widget code on your website.
By now it has become a revelation for those who work with applications on Android platform and also designs user interfaces. It was introduced by Google a few years ago. The goal of material design was to create visual language, which would combine the principles of classical design with innovation.
The idea seems very promising and promising. Material design is the latest attempt to make user experience (UX) comfortable and efficient at the same time. Google has done a fantastic job in this area: they use minimal design elements, use unique components, bright colors, animation and create a user-friendly environment.
At the same time, designers practice the so-called floating action button (FAB). It is a round button, the appearance of which is well known Android users. It is another distinctive element of material design. FAB appears on top of the application interface and motivates users to take a specific targeted action.
Essentially, FAB is because its purpose is to convince a person to do something (such as download or upload certain content). A floating target action button is usually placed in the right corner of the screen. It is very difficult not to notice, as it has a bright and attractive design. FAB motivates the user to perform the most popular actions in the application. However, there are some problems when using these buttons.
What's wrong with floating target action buttons?FABs are a smart approach to motivate users to take action because they are hard to miss. However, they can be the wrong solution for user experience design as a whole. Here are a few reasons why floating target buttons can help: Negative influence on UX.
FABs can interfere with usersAs mentioned above, floating target action buttons are usually placed in the bottom right corner of the screen. In most cases, they are located on top of the application content, covering some part of it.
Of course, FABs are really small in size, so they only hide a small part of the content from the user's eyes. However, take a look at Google app Photos (screenshots below), where the floating target action button covers a significant part of the photo.
To see what is hidden under the button, the user will have to scroll down the page. But what if it's already at the very bottom of the page? Then scrolling will be impossible and the user will have to add some content to make the hidden part of the photo visible.
It is very important to recognize the fact that a floating target action button, despite its small size, can hide some part of the application’s content from the human eye. This may have Negative consequences for user experience.
Their design prevents complete immersionFloating target action buttons stand out noticeably against the general background. In many cases this creates obstacles to implementation the most important characteristic user experience - total immersion into the atmosphere of the application.
The example again is Google's Photos app. When a person opens it, he is taken to the user's gallery where he can simply view photos. In this situation, the search function provided by FAB may be useful, but it is not a priority.
The floating target button distracts him from his engrossed viewing of photos by taking up space on the screen and blocking some parts of the images. In such cases, the button should not stand out so much.
They may be uselessAs Google experts themselves explain, a floating button encourages the user to take a targeted action. However, developers sometimes forget how often a person performs this action while using the application.
The golden rule of user experience design is to make necessary and frequently used elements visible, and rarely used elements almost invisible. However, as we can see with the Gmail app (screenshot above), the developers did not take this rule into account.
On the application screen we see a button, by clicking on which the user can quickly proceed to writing an email. However, according to recent surveys, about half of users only view email using mobile devices. In other words, they don't often write letters using smartphones or tablets.
Material Design is a design language introduced by Google a year ago that represents the company's bold attempt to create a unified user experience across all devices and platforms. It is marked by bold colors, liberal but fundamental use shadows to indicate UI levels and smooth animation, which provides quite good experience interactions in Android (and some Google apps on iOS).
However, there is one thing about Material Design that has been bugging me since it was introduced last year: the floating action button.
FABs (Floating action buttons), according to Google, are round buttons that float above the UI and are “used to promote action.” They act as call-to-action buttons designed to perform the action that users perform most often on that screen.
And because of the brave visual style Material Design, FAB is quite difficult to ignore - and therein lies the problem. While in practice, under ideal conditions, FAB seems to provide good UX, overusing FAB will be detrimental to the overall UX of the application. Here are some reasons for this.
Immersion comes from experience
FABs stand out visually — they are literally on top of any UI element on the screen. Also, adding FAB would automatically result in a less immersive UX, especially affecting apps (or screens) whose purpose is to provide an interactive experience.
One example is Google's new photo app.
The photo app opens as a gallery with a floating search button. But the thing is, when I open a photo app, I just want to... see my photos. Thus, the floating search button distracts the user from immersing themselves in browsing photos, which is the main purpose of the application. Introduced, Smart Search is a unique feature of the Google Photo app. But does this mean that he needs to be given the highest level, permanent FAB in the application? (I think no.)
Oddly enough, Google agrees with me. On the Material Design page on FABs, Google explains that "not every screen needs a floating command button."
And then he adds that “the main action is to touch the image in the gallery, in which case the button is not needed.
This may seem like the other side of the coin, but there is something more important property FAB standing in the way of its usefulness. By taking up space on the screen, FAB effectively blocks content.
Well, okay, FAB is just a little round button, right? How much content can it block?
If you look at the photo app's screenshot, you'll realize that the search FAB is blocking about 50 percent of the thumbnail image—certainly enough to obscure a couple of faces. This essentially creates the need for one additional scroll for every fourth thumbnail of the last row on the screen. And that's not the worst part.
FAB blocks the “Favorites” button and the date. User Dumazy posted on the Graphic Design Stack Exchange about an issue he encountered when FAB blocked the "favorites" star as well as the time on his app's screen. This illustrates a problem with all list view apps, and it becomes especially problematic when the last item in the list can't scroll any further up. This means that an entire column must be sacrificed (changing the location of the asterisk, etc.) to provide proper screen usability.
Consequently, FAB takes up much more screen real estate than its size suggests.
Facilitating action is likely not used that often.When designing UX, you need to remember the 80/20 rule, which says that users will use 20% of features 80% of the time. In other words, most of the effort should be put into designing those few elements that users will use most of the time.
FAB actually does this - in theory. But what if Promoting Action isn't used as often?
Take Google's Gmail app for example.
The Gmail app's FAB is a compose button that assumes that users' primary action is to compose an email.
But is it?
Multiple studies have shown that at least 50% of emails are read on a mobile device, and almost none say that about email creation. In other words, as our daily experience would confirm, most mobile device users tend to use their email applications to read emails.
Perhaps a number of people use mobile devices to respond to emails, but this only happens after the email is opened (note that this means they will bypass the FAB). This user behavior is probably caused by a rather imperfect input mechanism virtual keyboards and auto-replacement means that the main action users perform is reading (and replying) emails, not creating new ones.
So, what does the FAB “compose email” button do? On rare occasions, it gives pleasure to users when they want to create a letter using this application. But the rest of the time, it only takes up space on the screen, blocks the “star” and time, and constantly distracts with a bright red color.
Do we want FAB? Cross out the previous one - do we need it at all?Of course, not all FAB uses degrade the experience of using Material apps. There are some great examples of FABs that make sense and that improve the UX of these apps.
Google Maps this is a great example of FAB done right. The main action users perform on Maps is getting directions, so it is very appropriate to use FAB for this purpose.
But keep in mind that the Maps are quite a special case, when content users are almost always interested in getting to the center of the screen (where your blue dot is located, marking the position). In most applications, however, a grid or list view means that users interact with content located everywhere on the screen, including where FABs are typically located.
Please also note that the screenshots above only tell part of the story: in actual use, the FABs stay in place even when the user is scrolling (most of the time). As Google has emphasized many times in Material Design, motion design is just as important as UI design.
The absence of movement - the emphasis on screen space - in the context of moving content creates more high level a distraction that screenshots can’t show.
So, since we have almost no examples of good FAB implementations, this begs the question: are they needed?
When we look at the disadvantages of having FABs in apps, we can boil it down to a simple understanding: users not only perform actions in apps, they also consume content.
FAB's design Material Design is based on the premise that users perform a particular action most of the time, and therefore it should be given elevated status in the form of a main, high-level button. But in many apps, users are also focused on consuming content: in a photo app, users want to look at photos; V Gmail app users want to read their emails; and in Facebook app, users want to read their friends' messages.
FAB is thus a design philosophy (or at least a design choice) that subordinates the optimal consumption of content to the performance of action. And we must ask ourselves: is such a compromise necessary? Do we even want to make such a compromise?
When FABs result in poor UX most of the time, when it's hard to figure out the single most used action within an app, and when you have to find roundabout ways (where the FAB disappears on scroll or overlaps with other elements when swiping), I'd say the answer is no.
Google's Material Design is a pretty good unified, principled design language, but FAB isn't the best thing about it.