这是我想要的twitter equivalent。
$(document).ready(function(){
$('#facebook').on('click',function(event){
event.preventDefault();
window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent('Hello'));
});
});*{
padding:0px;
margin:0px
}
body{
width:100vw;
height:100vh;
background:red;
/*center the button*/
display:flex;
justify-content:center;
align-items:center;
/*background image properties*/
background:url(https://s-media-cache-ak0.pinimg.com/originals/98/a5/cf/98a5cf91e8aef10a2b81303a7ccbce9e.jpg) fixed no-repeat;
background-size:cover;
}
.button{
display:block;
height:200px;
width:200px;
background:blue;
border-radius:10px;
/*enter the f inside the box*/
display:flex;
justify-content:center;
align-items:center;
/*size of the f*/
font-size:180px;
/*frosty glass effect*/
background:inherit;
z-index:1;
/*removing position will spread the blur onto the entire page.*/
position:relative;
/*hides the blurry edge*/
overflow:hidden;
}
.button::before{
background:inherit;
z-index: -1;
/*This is not blurring. This makes it paler/less colorful*/
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
/*Sharpen the edge*/
margin:-20px;
filter:blur(10px);
content:"";
position:absolute;
/*THIS is where the blur effect appears*/
top: 0; right: 0; bottom: 0; left: 0;
}
/*Hover the cursor effect*/
.button:hover::before{
box-shadow: inset 0 0 3000px rgba(255,255,255,.8);
}
/*Click effect*/
.button:active::before{
box-shadow: inset 0 0 3000px rgba(255,255,255,.3);
}
.position{
position:relative;
left:30px;
top:23px;
color:white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<a class='button' id='facebook'><i class="fa fa-facebook position"></i></a>