Create 'focus' Circle With Blurry Background In HTML And CSS

Today i found amazing filter button with 'circle black background' and i really liked it. I want to integrate it in my website to study how to create it but i dont know how to star

Solution 1:

I just created a playground for you here https://jsfiddle.net/rxnc3zb7/. In general I added the following:

width:400px;
height:400px;
bottom:-150px;
right:-150px;

to the .go-top:hover. Set width, height, bottom and right values according to your needs. I've no tested it with the icon but I think you should hide it on hover (so .go-top:hover i {opacity:0}). But, if you want to center it you should set .go-top like this:

display:flex;
align-items:center;
justify-content:center;

In this way your icon will be aligned in any case.

Blur effect

For the blur effect I added a js code that simply add the class blur-content to the content container (in the example is .content) when the mouse is over on .go-top and remove it when mouse is out.

$('.go-top').hover(function(){
    $('.content').addClass("blur-content");

},function(){
    $('.content').removeClass("blur-content");
})

Additionally, I defined the blur-content class like this:

.blur-content{
  filter:blur(3px);
}

Solution 2:

The basic idea would be something like this. You can use CSS further to make it look more elegant. These applications generally have an Overlay in place which reacts to user button click or hover and display it.

You can use the below link to blur out your page contents or something similar Full Page Blur in CSS

onBtnClick = ()=>{
document.getElementById("idBgOverlay").classList.toggle("overlayDisp");
}

.fullBg{
  width:100%;
  height: 300px;
  background:orange;
}

.mybutton{
  border:none;
  border-radius: 50%;
  color:#000;
  background:#fff;
  width:3rem;
  height:3rem;
  font-size:2rem;
  z-index:2;
  position:absolute;
}

.bgOverlay{
  background:#101010c7;
  position:absolute;
  height:13rem;
  width:13rem;
  border-radius:50%;
  top:-2rem;
  left:-2rem;
  display:none;
}

.overlayDisp{
  display:block;
}

<div class="fullBg">
   <div id="idBgOverlay" class="bgOverlay"></div>
  <button class="mybutton" onclick="onBtnClick()"> + </button>
 
 <div>