button
{
 position:absolute;
 height:4%;
 font-size:95%;
 cursor:pointer;
 color:Cornsilk;
 opacity:0.5;
 background-color:MidnightBlue;
 font-weight:bold;
}
 button:hover
{
 background-image: linear-gradient(90deg, MidnightBlue, #03a9f4, #f441a5, white,#f441a5, #03a9f4, MidnightBlue);
 background-size: 400%;
 animation: animate 8s linear infinite;
}
 @keyframes animate
{
 0%  {background-position:0%;}
 100%{background-position:100%;}
}
 button:before
{
 position: absolute;
 top: -5px;
 right: -5px;
 bottom: -5px;
 left: -5px;
 z-index: -1;
 background-image: linear-gradient(90deg, MidnightBlue, #03a9f4, #f441a5, white,#f441a5, #03a9f4, MidnightBlue);
 background-size: 400%;
 border-radius: 40px;
 opacity: 0;
 transition: 0.5s;
}
 button:hover:before{filter:blur(20px);opacity:1;}

 #GrnGrannik, #GrnText, #GrnGit, #GrnFile, #GrnMail, #GrnCloud, #GrnPictur, #GrnAudio, #GrnPctVid, #GrnVid, #GrnTerm, #GrnWb, #GrnDes, #GrnClock{top:0%;}
 #GrnGrannik{width:8%;left: 0%;}
 #GrnText   {width:7%;left: 8%;}
 #GrnGit    {width:7%;left:15%;}
 #GrnFile   {width:7%;left:22%;}
 #GrnMail   {width:7%;left:29%;}
 #GrnCloud  {width:7%;left:36%;}
 #GrnPictur {width:7%;left:43%;}
 #GrnAudio  {width:7%;left:50%;}
 #GrnVid    {width:7%;left:57%;}
 #GrnScInNt {width:7%;left:64%;}
 #GrnWb     {width:7%;left:71%;}
 #GrnTerm   {width:7%;left:78%;}
 #GrnDes    {width:7%;left:85%;}
 #GrnClock  {width:8%;left:92%;}

 iframe{position:absolute;left:8%;top:4%;width:84%;height:96%;}

/* Проявить блоки txt */
 #GrnTrans, #GrnTxtEdt, #GrnMyTxt, #GrnMyPdf
{font-size:95%;left:8%;height:4%;width:7%;overflow:hidden;color:#ffffff;font-family:"Courier New",monospace;opacity:0.6;display:none;}
 #GrnTrans {top:4%;}
 #GrnTxtEdt{top:8%;}
 #GrnMyTxt {top:12%;}
 #GrnMyPdf {top:16%;}
 #GrnTrans::before, #GrnTxtEdt::before, #GrnMyTxt::before, #GrnMyPdf::before
{
 color:#ffffff;
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image:linear-gradient(90deg,MidnightBlue,#03a9f4,#f441a5,#808080,#f441a5,#03a9f4,MidnightBlue);
 opacity: 0;
 z-index: -1;
 transition: opacity 1s;
}
 #GrnTrans:hover::before, #GrnTxtEdt:hover::before, #GrnMyTxt:hover::before, #GrnMyPdf:hover::before{opacity:1;}
/* --- Блок кнопки Pict --- */
 #GrnPicEdt,#GrnPictMy,#GrnUpsclr,#GrnMySvg,#GrnImgGif,#GrnImgSvg
{font-size:95%;left:43%;height:4%;width:7%;overflow:hidden;color:#ffffff;font-family:"Courier New",monospace;opacity:0.6;display:none;}
 #GrnPicEdt{top:4%;}
 #GrnPictMy{top:8%;}
 #GrnUpsclr{top:12%;}
 #GrnMySvg {top:16%;}
 #GrnImgGif{top:20%;}
 #GrnImgSvg{top:24%;}
 #GrnPicEdt::before, #GrnPictMy::before, #GrnUpsclr::before, #GrnMySvg::before, #GrnImgGif::before, #GrnImgSvg::before
{
 color:#ffffff;
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image:linear-gradient(90deg,MidnightBlue,#03a9f4,#f441a5,#808080,#f441a5,#03a9f4,MidnightBlue);
 opacity: 0;
 z-index: -1;
 transition: opacity 1s;
}
 #GrnPicEdt:hover::before, #GrnPictMy:hover::before, #GrnUpsclr:hover::before, #GrnMySvg:hover::before, #GrnImgGif:hover::before, #GrnImgSvg:hover::before {opacity:1;}

/* Проявить блок кнопки Audio */
 #GrnAudEdit,#GrnAudioMy{font-size:95%;left:50%;height:4%;width:7%;overflow:hidden;color:#ffffff;font-family:"Courier New",monospace;opacity:0.6;display:none;}
 #GrnAudEdit{top:4%;}
 #GrnAudioMy{top:8%;}
 #GrnAudEdit::before, #GrnAudioMy::before
{
 color:#ffffff;
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image:linear-gradient(90deg,MidnightBlue,#03a9f4,#f441a5,#808080,#f441a5,#03a9f4,MidnightBlue);
 opacity: 0;
 z-index: -1;
 transition: opacity 1s;
}
 #GrnAudEdit:hover::before, #GrnAudioMy:hover::before{opacity:1;}
/* Проявить блок кнопку Vid*/
 #GrnDwnVd,#GrnEdtVd,#GrnUplVd,#GrnMyVid
{font-size:95%;left:57%;height:4%;width:7%;overflow:hidden;color:#ffffff;font-family:"Courier New",monospace;opacity:0.6;display:none;}
 #GrnDwnVd{top:4%;}
 #GrnEdtVd{top:8%;}
 #GrnUplVd{top:12%;}
 #GrnMyVid{top:16%;}
 #GrnDwnVd::before, #GrnEdtVd::before, #GrnUplVd::before, #GrnMyVid::before
{
 color:#ffffff;
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image:linear-gradient(90deg,MidnightBlue,#03a9f4,#f441a5,#808080,#f441a5,#03a9f4,MidnightBlue);
 opacity: 0;
 z-index: -1;
 transition: opacity 1s;
}
 #GrnDwnVd:hover::before, #GrnEdtVd:hover::before, #GrnUplVd:hover::before, #GrnMyVid:hover::before{opacity:1;}
/* Проявить скрыть кнопки Terminal */
 #TermPy{top:4%; }
 #TermC {top:8%; }
 #TermGo{top:12%;}
 #TermBh{top:16%;}
 #TermPy, #TermC, #TermGo, #TermBh
 {right:15%;font-size:95%;height:4%;width:7%;overflow:hidden;color:#ffffff;font-family:"Courier New",monospace;opacity:0.6;display:none;}
 #TermPy::before, #TermC::before, #TermGo::before, #TermBh::before
{
 color:#ffffff;
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image:linear-gradient(90deg,MidnightBlue,#03a9f4,#f441a5,#808080,#f441a5,#03a9f4,MidnightBlue);
 opacity: 0;
 z-index: -1;
 transition: opacity 1s;
}
 #TermPy:hover::before, #TermC:hover::before, #TermGo:hover::before, #TermBh:hover::before{opacity:1;}
/* Проявить блоки кнопки Desktop */
 #DesPy {top:4%;}
 #DesC  {top:8%;}
 #DesCpp{top:12%;}
 #DesPy, #DesC, #DesCpp
 {right:8%;font-size:95%;height:4%;width:7%;overflow:hidden;color:#ffffff;font-family:"Courier New",monospace;opacity:0.6;display:none;}
/**/
 #DesPy::before, #DesC::before, #DesCpp::before
{
 color:#ffffff;
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image:linear-gradient(90deg,MidnightBlue,#03a9f4,#f441a5,#808080,#f441a5,#03a9f4,MidnightBlue);
 opacity: 0;
 z-index: -1;
 transition: opacity 1s;
}
 #DesPy:hover::before, #DesC:hover::before, #DesCpp:hover::before{opacity:1;}
/* Проявить блоки кнопки Web */
 #WbHtm, #WbCss, #WbJs, #WbPhp
{font-size:95%;height:4%;width:7%;overflow:hidden;color:#ffffff;font-family:"Courier New",monospace;opacity:0.6;display:none;}
 #WbHtm{top: 4%;right:22%;}
 #WbCss{top: 8%;right:22%;}
 #WbJs {top:12%;right:22%;}
 #WbPhp{top:16%;right:22%;}
 #WbHtm::before, #WbCss::before, #WbJs::before, #WbPhp::before
{
 color:#ffffff;
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image:linear-gradient(90deg,MidnightBlue,#03a9f4,#f441a5,#808080,#f441a5,#03a9f4,MidnightBlue);
 opacity: 0;
 z-index: -1;
 transition: opacity 1s;
}
 #WbHtm:hover::before, #WbCss:hover::before, #WbJs:hover::before, #WbPhp:hover::before{opacity:1;}

/* Социальные интернет сети */
 #iMesseng,#iBastyon
{font-size:95%;right:29%;height:4%;width:7%;overflow:hidden;color:#ffffff;font-family:"Courier New",monospace;opacity:0.6;display:none;}
 #iMesseng{top:4%;}
 #iBastyon{top:8%;}
 #iMesseng::before, #iBastyon::before
{
 color:#ffffff;
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image:linear-gradient(90deg,MidnightBlue,#03a9f4,#f441a5,#808080,#f441a5,#03a9f4,MidnightBlue);
 opacity: 0;
 z-index: -1;
 transition: opacity 1s;
}
 #iMesseng:hover::before, #iBastyon:hover::before{opacity:1;}