How to make a floating action button using css?

Question

I was looking for a way to do something like this (for a webpage) using HTML / CSS / jQuery, but wasn’t.

I am trying to make a button from which other parameters exit when you hover over it.

Answer 1

Here is an example of how to use css and html to create a floating action button (no hover effect)

<button class="kc_fab_main_btn">+</button>

.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);
}

Demo

And here is a simple jQuery plugin with smooth action if you need it. But it uses a click trigger, and not freezes.

KC_FAB

Answer 2

Do you have any code pre-written or are you just requesting a tutorial?

, , :

var el = $('a.button'); // the element you want to hover over
var hi = $('div.hidden'); // the div containing the hidden buttons

el.hover(function(){
    //do this when the mouse hovers over the link, eg
    hi.show('slide',{direction:'right'},250);
}, function(){
    //do this when the mouse leaves the link, eg
    hi.hide('slide',{direction:'left'},250);
});