Show DevBest Pure CSS Floating Action Button

[Markshall]

I think it's safe to say that by now, we've all seen the 'floating action button' effect. Correct me if I'm wrong, but it was popularised by Google with the Material design language.
Well, if you've not seen it, it's a button that floats (usually at the bottom right of a document), and when clicked, it displays a list of actions.

As ever, I'm using one of my favourite tricks of styling a checkbox as a toggle-listener rather than using JavaScript.

You must be registered for see links

CSS:

body {
    background-color: #f5f5f5;
}

.adminActions {
  position: fixed;
  bottom: 35px; right: 35px;
}

  .adminButton {
    height: 60px;
    width: 60px;
    background-color: rgba(67, 83, 143, .8);
    border-radius: 50%;
    display: block;
    color: #fff;
    text-align: center;
    position: relative;
    z-index: 1;
  }

    .adminButton i {
      font-size: 22px;
    }

  .adminButtons {
    position: absolute;
    width: 100%;
    bottom: 120%;
    text-align: center;
  }

    .adminButtons a {
      display: block;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      text-decoration: none;
      margin: 10px auto 0;
      line-height: 1.15;
      color: #fff;
      opacity: 0;
      visibility: hidden;
      position: relative;
      box-shadow: 0 0 5px 1px rgba(51, 51, 51, .3);
    }

      .adminButtons a:hover {
        transform: scale(1.05);
      }

      .adminButtons a:nth-child(1) {background-color: #ff5722; transition: opacity .2s ease-in-out .3s, transform .15s ease-in-out;}
      .adminButtons a:nth-child(2) {background-color: #03a9f4; transition: opacity .2s ease-in-out .25s, transform .15s ease-in-out;}
      .adminButtons a:nth-child(3) {background-color: #f44336; transition: opacity .2s ease-in-out .2s, transform .15s ease-in-out;}
      .adminButtons a:nth-child(4) {background-color: #4CAF50; transition: opacity .2s ease-in-out .15s, transform .15s ease-in-out;}

      .adminActions a i {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
      }

  .adminToggle {
    -webkit-appearance: none;
    position: absolute;
    border-radius: 50%;
    top: 0; left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: transparent;
    border: none;
    outline: none;
    z-index: 2;
    transition: box-shadow .2s ease-in-out;
    box-shadow: 0 3px 5px 1px rgba(51, 51, 51, .3);
  }

    .adminToggle:hover {
      box-shadow: 0 3px 6px 2px rgba(51, 51, 51, .3);
    }

    .adminToggle:checked ~ .adminButtons a {
      opacity: 1;
      visibility: visible;
    }

HTML:

<div class="adminActions">
    <input type="checkbox" name="adminToggle" class="adminToggle" />
    <a class="adminButton" href="#!"><i class="fa fa-cog"></i></a>
    <div class="adminButtons">
        <a href="#" title="Add Company"><i class="fa fa-building"></i></a>
        <a href="#" title="Edit Company"><i class="fa fa-pen"></i></a>
        <a href="#" title="Add User"><i class="fa fa-user-plus"></i></a>
        <a href="#" title="Edit User"><i class="fa fa-user-edit"></i></a>
    </div>
</div>

 

[JynX]

Good work, I enjoy seeing what you keep coming up with and you do a good job with a majority of them, keep it up.

 

[Jacco]

I really, really love it!

 

[Markshall]

Good work, I enjoy seeing what you keep coming up with and you do a good job with a majority of them, keep it up.

Thanks man glad you like them

I really, really love it!

Cheers, feel free to take and use.

I've updated it slightly so it's tidier and has smoother transitions on hovering

 

[Menkz]

As always, love all your work mark - although, 1 suggestion is that when you click the cog again, it does the animation it uses to open, but obviously reversed

 

[Markshall]

As always, love all your work mark - although, 1 suggestion is that when you click the cog again, it does the animation it uses to open, but obviously reversed

Thanks mate. I might get around to making it animate backwards too.

Post automatically merged: May 6, 2020

@pmslice

You must be registered for see links

What you asked for, I think.