Floating action buttons in CSS

I'm trying to create a button that reveals additional options when hovered over. I've been looking for a method similar to what's shown in the image below, but haven't been successful. This needs to be implemented on a web page using HTML, CSS, and jQuery.

https://i.sstatic.net/JjJFX.gif

jqueryhtmlcss

Answer №1

Here is an illustration demonstrating how to produce a floating action button using HTML and CSS (minus the hover effect).

.kc_fab_main_btn {
  background-color: #F44336;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  background: #F44336;
  border: none;
  outline: none;
  color: #FFF;
  font-size: 36px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: .3s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.kc_fab_main_btn:focus {
  transform: scale(1.1);
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
<button class="kc_fab_main_btn">+</button>

VIEW DEMONSTRATION

Additionally, here is a simplistic floating action button jQuery plugin for your reference, utilizing an on-click trigger instead of a hover effect.

KC_FAB PLUGIN

Answer №2

If you're looking to master this technique, I highly recommend checking out this tutorial: https://www.youtube.com/watch?v=iYFNaeEeCDI

For a live demonstration, follow this link: 

.fab-container {
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 999;
  cursor: pointer;
}
.fab-icon-holder {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: #016fb9;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

... (CSS code goes on) ...

</ul>
</div>

You can find the original example at: . The YouTube tutorial provides an excellent guide to implementing this feature.

Answer №3

UPDATE 5/3/2021

Today, I went back to my solution and completed the unfinished parts from yesterday. Several enhancements and stylistic improvements were also added. The parent #mega-button now features a gradient background that smoothly transitions to a faded blue-gray color by utilizing an oversized gradient and transitioning the background-position property. As a hover effect, this button decreases in size while the child elements of .sub-button rotate and increase in size, giving the impression that they are rolling out from behind the #mega-button.

To create a smoother and more natural transition, I introduced a slight transition-delay between each of the .sub-button elements, resulting in a waterfall effect instead of all buttons appearing simultaneously. To achieve this unique position per .sub-button, I used a for loop in my SCSS, iterating in reverse for the transition-delay so that the right-most button animates out first.

I also incorporated some glassmorphism styles to give the #mega-button a subtle frosted glass appearance as the buttons roll out from behind it: backdrop-filter: blur(4px)

When any of the child buttons are clicked, they open their respective modal using :target. Each modal provides multiple options for closing purely with HTML/CSS:

  • Clicking on the translucent background behind the modal.
  • Clicking the close button "x" in the top-right corner.
  • Clicking the "Cancel" action button.

Every modal is unique and triggered by its corresponding .sub-button. Additionally, I established a modular system for the modal styles, including global styles for .modal-content, .modal-header, and .modal-body, along with contextual styles for the .modal-close class that serves as the clickable/cancellable backdrop when placed within the modal's main element or as the "x" in the corner if located within .modal-content. Clicking either will close the modal.

Two additional features I included today:

  • Styling for a "new post" form with dynamic spacing capabilities, and generic styles for a brief alert modal used for Archive and Delete actions.
  • A hover tooltip displayed over the #mega-button. This tooltip is non-interactive and does not obstruct content behind it due to its pointer-events: none property. It fades away with opacity: 0 when hovering over the #mega-button or its descendants, or if a modal is open, via the general sibling combinator (~).

The final product can be viewed here:

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
.modal .modal-content .modal-body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
/* Other CSS rules follow... */

<script src="https://kit.fontawesome.com/07afc061fe.js" crossorigin="anonymous"></script>

<div id="modal-write" class="modal">
  <a href="#" class="modal-close"></a>
  /* Modal content goes here */
</div>
/* More modal code... */
</div>

For the original CodePen showcasing this solution with all its Sass characteristics, click here: https://codepen.io/brandonmcconnell/pen/082f4ee58d234501757b8d6a748c514b?editors=0100

If preferred, all dynamic variables in the SCSS can easily be converted to CSS custom properties to maintain dynamic calculations in the final CSS file.

Answer №4

Check out the code snippet below for creating floating buttons on hover using HTML and CSS: 

.flBtnCntr {
  display: inline-flex;
  position: absolute;
  top: 50px;
  left: 50px
}
.flBtnBox {
  outline: 0;
  border: 0;
  border-radius: 50%;
  background-color: #2978d3;
  color: #fff;
  cursor: pointer
}
.flBtnBox.big {
  background-color: #2978d3;
  font-size: 30px;
  height: 50px;
  width: 50px
}
.flBtnBox.small {
  animation: showBtn 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  transform: scale(0);
  background-color: #363636;
  margin: 0 5px;
  font-size: 20px;
  height: 30px;
  width: 30px;
}
.flBtnBox.small:nth-child(2) {
  animation-delay: 150ms
}
.flBtnBox.small:nth-child(3) {
  animation-delay: 300ms
}
@keyframes showBtn {
  0% {
    transform: scale(0)
  }
  100% {
    transform: scale(1)
  }
}
.flBtnBox.big:hover {
  box-shadow: 0 0 10px rgba(41,120,211,0.4)
}
.flBtnBox.small:hover {
  box-shadow: 0 0 10px rgba(0,0,0,0.3)
}
.flBtns {
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  display: none;
  padding: 0 5px;
  align-items: center
}
.flBtnCntr:hover .flBtns {
  display: inline-flex
}
<div class="flBtnCntr">
  <button class="flBtnBox big">+</button>
  <div class="flBtns">
    <button class="flBtnBox small">+</button>
    <button class="flBtnBox small">+</button>
    <button class="flBtnBox small">+</button>
  </div>
</div>

View the live demo on CodePen: Demo

Answer №5

:target usage with modal box design

Creating a modal window with customized styling inspired by this particular response on Stack Overflow

.fab-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 999;
  cursor: pointer;
}

.fab-icon-holder {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: black;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.fab-icon-holder:hover {
  opacity: 0.8;
}

.fab-icon-holder i {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 25px;
  color: #ffffff;
}

.fab {
  width: 60px;
  height: 60px;
  background: #3F51B5;
}

.fab-options {
  list-style-type: none;
  margin: 0;
  position: absolute;
  bottom: 0px;
  left: 30px;
  opacity: 0;
  transition: all 0.3s ease;
  transform: scale(0);
  transform-origin: 85% left;
}

.fab:hover+.fab-options,
.fab-options:hover {
  opacity: 1;
  transform: scale(1);
}

.fab-options li {
  display: flex;
  justify-content: flex-end;
  padding: 5px;
}

:target {
  visibility: visible !important;
}

#modal {
  visibility: hidden;
  width: 80%;
  height: 80%;
  position: fixed;
  left: 10%;
  box-shadow: 0 0 3px black;
}

#modal .content {
  margin: 1em;
}

#modal #close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 2em;
  cursor: pointer;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="fab-container">
  <div class="fab fab-icon-holder">
    <i class="fas fa-question material-icons">add</i>
  </div>
  <ul class="fab-options">
    <li>
      <div class="fab-icon-holder">
        <a href="#modal" style="all:unset"><i class="fas fa-file-alt material-icons">launch</i></a>
      </div>
    </li>
  </ul>
</div>
<div id="modal">
  <div class="content">
    This is a modal
  </div>
  <a href="#"><i id="close">×</i></a>
</div>

Here's my previous method (though lacking in visual appeal):

html,
body {
  height: 100%;
}

.buttons {
  position: fixed;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: center;
}

.button {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  cursor: pointer;
  transition: 1s;
}

.button {
  color: white;
}

.parent-button {
  box-shadow:0 0 3px #3F51B5;
  background-color: #3F51B5;
  padding: 1em;
  color: white;
}

.child-button {
  box-shadow:0 0 3px black;
  background-color: black;
  margin-left: 5px;
  padding:0.75em;
  opacity:0;
}
.child-button a{
  color:white;
}
.parent-button:hover~.child-button{
  opacity:1;
}

.child-button:hover{
  opacity:1;
}
:target {
  visibility: visible !important;
}

#modal {
  visibility: hidden;
  width: 80%;
  height: 80%;
  position: fixed;
  left: 10%;
  box-shadow: 0 0 3px black;
}

#modal .content {
  margin: 1em;
}

#modal #close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 2em;
  cursor: pointer;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="buttons">
  <div class="parent-button button">
    <i class="material-icons">add</i>
  </div>
  
    <div class="child-button button">
      <a href="#modal"><i class="material-icons">fullscreen</i></a>
    </div>
</div>
<div id="modal">
  <div class="content">
    This is a modal
  </div>
  <a href="#"><i id="close">×</i></a>
</div>

Answer №6

Are you in need of prewritten code or are you seeking guidance through a tutorial?

If you already have code prepared, here's a suggestion on how to organize it for success:

let button = $('a.button'); // the specific element to be hovered over
let hiddenDiv = $('div.hidden'); // the container holding the hidden buttons

button.hover(function(){
    // execute this when hovering over the link
    hiddenDiv.show('slide', {direction:'right'}, 250);
}, function(){
    // execute this when moving away from the link
    hiddenDiv.hide('slide', {direction:'left'}, 250);
});

Answer №7

Stylish Slide for in-out Effect

Method 1: Adjusting the width from 0px to a size that fits the content.

.material-icons {
  vertical-align: middle;
  user-select: none;
}

.action-container {
  position: fixed;
  bottom: 10px;
  left: 10px;
  display: flex;
  cursor: pointer;
}

.child-container {
  display: flex;
  width: 0px;
  transition: 1s;
  overflow: hidden;
}

.action-btn {
  width: fit-content;
  border-radius: 50%;
  display: inline-block;
}

.action-parent {
  padding: 1em;
  background-color: #3F51B5;
  color: white;
}

.action-parent:hover+.child-container {
  width: 159px;
}

.action-child {
  padding: 0.75em;
  background-color: black;
  color: white;
  height: fit-content; 
  margin-top: 5px;
  margin-left: 5px;
}

.child-container:hover {
  width: 159px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="action-container">
  <div class="action-parent action-btn">
    <i class="material-icons">add</i>
  </div>
  <div class="child-container">
    <div class="action-child action-btn">
      <i class="material-icons">add</i>
    </div>
    <div class="action-child action-btn">
      <i class="material-icons">add</i>
    </div>
    <div class="action-child action-btn">
      <i class="material-icons">add</i>
    </div>
  </div>
</div>

Method 2: Sliding in the entire child action button container:

.material-icons {
  vertical-align: middle;
  user-select: none;
}

.action-container {
  position: fixed;
  bottom: 10px;
  left: 10px;
  display: flex;
  cursor: pointer;
}

.child-container {
  display: flex;
}

.action-btn {
  width: fit-content;
  border-radius: 50%;
  display: inline-block;
}

.action-parent {
  padding: 1em;
  background-color: #3F51B5;
  color: white;
  z-index: 1;
}

.action-parent:hover+.child-container .action-child {
  margin-left: 5px;
}

.action-child {
  transition: 1s;
  padding: 0.75em;
  background-color: black;
  color: white;
  height: fit-content;
  margin-top: 5px;
  margin-left: -50px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="action-container">
  <div class="action-parent action-btn">
    <i class="material-icons">add</i>
  </div>
  <div class="child-container">
    <div class="action-child action-btn">
      <i class="material-icons">add</i>
    </div>
    <div class="action-child action-btn">
      <i class="material-icons">add</i>
    </div>
    <div class="action-child action-btn">
      <i class="material-icons">add</i>
    </div>
  </div>
</div>

Answer №8

Here is my solution to the problem at hand.

Preview: https://jsfiddle.net/rp0jg576/53/

HTML and CSS markup:

i {
  color: #fff;
  font-size: 20px !important;
  /* 24px preferred icon size */
}

a {
  text-decoration: none;
}

#btn {
  display: none;
}

.button-parent {
  display: flex;
}

.button {
  width: 50px;
  height: 50px;
  display: block;
  margin: 5px;
  background-color: #3498db;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}


/* link and link-parent */

.link-parent {
  display: none;
  justify-content: center;
  align-items: center;
  transition: all .3s;
}

.link-item {
  background-color: #2c3e50;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 5px;
  transform: translateY(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  animation-name: move-up;
  animation-duration: .3s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}


/* control click */

#btn:checked~.link-parent {
  display: flex;
}


/* animation */

@keyframes move-up {
  0% {
    transform: translateY(5px);
  }
  33% {
    transform: translateY(0px);
  }
  66% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0px);
  }
}

#link-one {
  animation-delay: .1s;
}

#link-two {
  animation-delay: .2s;
}

#link-third {
  animation-delay: .3s;
}

#link-forth {
  animation-delay: .4s;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class='button-parent'>
  <input type="checkbox" id='btn'>
  <label for="btn" class='button'>
        <i class="material-icons">close</i>
      </label>

  <div class="link-parent">
    <a href='#' class='link-item' id='link-one'>
      <i class="material-icons">home</i>
    </a>
    <a href='#' class='link-item' id='link-two'>
      <i class="material-icons">article</i>
    </a>
    <a href='#' class='link-item' id='link-three'>
      <i class="material-icons">settings</i>
    </a>
    <a href='#' class='link-item' id='link-four'>
      <i class="material-icons">room</i>
    </a>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sending form data to a CFC asynchronously in Coldfusion

To begin with, I want to mention that the product I am creating is intended for individuals who do not have automatic access to HTML5. Some of these people are still using IE8. Here's an example of a form: <form action="ee.cfc?method=xlsupload" en ...

javascriptjqueryformscoldfusion

Show results from selecting multiple dropdown options

I am looking to create a search function that displays results based on multiple dropdown selections. I have 4 dropdown menus and a submit button, but I am unsure how to show the search results upon clicking the submit button. The desired outcome is to dis ...

phphtmlmysqlcodeigniterdrop-down-menu

The whitespace issue stems from the div element __next-build-watcher generated by next js and usecontext

There's a notification bar at the bottom of my page that lets the user know when their email has been sent. This bar is generated using useContext in React/Next.js. To see the code, check out this Codebox link: Code However, I've noticed there ...

javascripthtmlcssnext.js

Visual Composer now appends "?id=" to the background images of columns and rows, enhancing the customization

I am in the process of improving the performance of a WordPress site that is using the Visual Composer plugin. When checking GTmetrix results, I came across this issue: Ensure resources are served from a consistent URL https://example.com/wp-content/uploa ...

phpcsswordpresspagespeedvisual-composer

What is the best way to send props to a styled component without needing to convert them to transient props beforehand

Recently, I designed a custom Text component that accepts several props. These props are then forwarded to the styled component where specific styles are applied. However, I am facing an issue where I do not want these props to be passed down to the DOM, b ...

javascriptcssreactjstypescriptstyled-components

Potential Bug Detected in Internet Explorer on Mouseenter Event

I'm facing a challenge with my HTML/CSS code. I have a carousel that includes two li elements positioned absolutely on each side for navigation but they are not displaying correctly in IE versions 7-9 - they appear behind the main element regardless o ...

jqueryhtmlcssinternet-explorer

Pressing the "Ctrl" key, click on the link that will display a

I received a link that utilizes AJAX to render a partial view. Below is the code for the link: <a href="#" onclick="LoadChildCategories(@i.CategoryId, @i.IsTrading.ToString().ToLower())">@i.Name</a> Here is the code for the LoadChildCa ...

javascriptc#jqueryajaxasp.net-mvc

beforeprinting() and afterprinting() function counterparts for non-IE browsers

Is there a way to send information back to my database when a user prints a specific webpage, without relying on browser-specific functions like onbeforeprint() and onafterprint()? I'm open to using any combination of technologies (PHP, MySQL, JavaScr ...

phpjavascriptmysqlhtmlonbeforeprint

Automating the process of disabling a function on Internet Explorer

As I work on a new Internet Explorer plug-in, I've come across a frustrating feature that has been present since at least IE7. This feature allows users to modify the sizing of HTML elements in editable windows, like rich text emails in GMail, by simp ...

c#.nethtmlinternet-explorercoding-style

Top approach for inserting Class instance into a group

I need some guidance on how to approach this issue. I am interested in creating a set of objects similar to the example below: Person P = new Person(); P.Name = 'John'; P.Surname = 'Dough'; var People = []; People.push(P); Can this b ...

javascriptjqueryangularjs

Using Tinymce to automatically send form on blur action

Attempting to trigger form submission upon blur event in Tinymce, but encountering difficulties. tinymce.init({ selector: 'textarea.html', menubar:false, force_br_newlines : true, force_p_newlines ...

javascriptjquerytinymcetinymce-4

I am unable to utilize the backspace function within a text box generated by JavaScript

I have created a dynamic form using JavaScript that includes buttons and one text input field. However, the issue is that to delete the text entered in the input field, one must highlight the text and then type over it instead of being able to simply use t ...

javascripthtmlformsinput

Display a single image on the tablet and a distinct image on the computer

Currently, I am encountering an issue with my webpage located at . The problem lies in the right upper corner where a ribbon is located. However, when viewing the page on a tablet, the ribbon overlaps with my menu. To resolve this, I thought about displa ...

htmlcssresponsive-design

What is the best way to resize an SVG to perfectly fit the parent div container?

I need to display multiple SVGs from various sources, each with different height, width, and viewbox. I want them all to render within a fixed height and width div, filling up the available space. How can I scale these SVGs to fit the container div? For i ...

javascripthtmlcsssvg

Integrating dual Google Maps onto a single HTML page

I'm facing an issue with implementing two Google maps on a single page where the second map seems to be malfunctioning. Below is the code I am currently using: <style> #map-london { width: 500px; height: 400px; } #map-belgium { wi ...

javascripthtmlcssgoogle-maps

Tool to identify your network location: Local domain and network status checker

Is there a way to determine if a user is accessing our site from within our local network or from the broader internet? For example, imagine someone scans a QR code at our restaurant that leads to a page designed to check whether they are connected locall ...

phphtmldnsqr-codelocal

Break down and simplify the code into individual components

<input type='button' class="myButton" onclick="document.body.style.cssText+=';background-image: url(img01.jpg);background-repeat: no-repeat; -moz-background-size: cover; -o-background-size: cover; background-size: cover;';" value="S ...

htmlcss

Creating a responsive layout that sets the window height to 100% and automatically adjusts sibling divs when the content within parent divs exceeds the defined height

<section> <div class="section-wrap"> <h1>page1</h1> </div> </section> <section> <div class="section-wrap"> <h1>page2</h1> </div> </section> My attempt at impleme ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Text in d3.js vanishing while undergoing rotation

I have been struggling for hours with what seems like a simple problem and haven't made any progress. I'm hoping to receive some valuable advice from the brilliant minds on stackoverflow. You can view my demo at I attempted to use jsfiddle to s ...

javascriptjqueryhtmld3.jstext-rotation

Switch out the jQuery library on a webpage for Greasemonkey

Is there a way to update the jQuery version on a page using Greasemonkey? I want to experiment with a newer jQuery version on a website, but I don't have access to a development environment. ...

jquerygreasemonkey