/* ====================================================*/
       
        .btn04 {
            margin: 260 10;   
            color: #fff;
            text-decoration: none;
            text-align: center;
            display: block;
            width: 70px;
            height: 70px;
            line-height: 70px; 
        }

        .btn04::before {
            content: '';
            background-color: #0080FF;
            display: block;
           position: fixed; 
            width: 70px;
            height: 70px;
            z-index: -1;
            border-radius: 20%;
            box-shadow:
                0 0 0 0 #fff,
                0 0 0 0 #dda284;
            transition: all .2s ease;
            -webkit-transition: all .2s ease;
        }
        .btn04:hover::before {
            transform: scale(0.8);
            -webkit-transform: scale(0.8);
            box-shadow:
                0 0 0 25px #fff,
                0 0 0 27px #dda284;
        }


        
         .btn05 {
            margin: -260 10;
            color: #fff;
            text-decoration: none;
            text-align: center;
            display: block;
            width: 70px;
            height: 70px;
            line-height: 70px;
        }

        .btn05::before {
            content: '';
            background-color: #33e333;
            display: block;
            position: fixed;
            width: 70px;
            height: 70px;
            z-index: -1;
            border-radius: 20%;
            box-shadow:
                0 0 0 0 #fff,
                0 0 0 0 #dda284;
            transition: all .2s ease;
            -webkit-transition: all .2s ease;
        }
        .btn05:hover::before {
            transform: scale(0.8);
            -webkit-transform: scale(0.8);
            box-shadow:
                0 0 0 25px #fff,
                0 0 0 27px #33e333;
        }
          .btn06 {
            margin: 260 10;
            color: #fff;
            text-decoration: none;
            text-align: center;
            display: block;
            width: 70px;
            height: 70px;
            line-height: 70px;
        }

        .btn06::before {
            content: '';
            background-color: #ff3333;
            display: block;
            position: fixed;
            width: 70px;
            height: 70px;
            z-index: -1;
            border-radius: 20%;
            box-shadow:
                0 0 0 0 #fff,
                0 0 0 0 #dda284;
            transition: all .2s ease;
            -webkit-transition: all .2s ease;
        }
        .btn06:hover::before {
            transform: scale(0.8);
            -webkit-transform: scale(0.8);
            box-shadow:
                0 0 0 25px #fff,
                0 0 0 27px #ff3333;
        }
          
           .btn07 {
            margin: -260 10;
            color: #fff;
            text-decoration: none;
            text-align: center;
            display: block;
            width: 70px;
            height: 70px;
            line-height: 70px;
        }

        .btn07::before {
            content: '';
            background-color: #ff33ff;
            display: block;
            position: fixed;
            width: 70px;
            height: 70px;
            z-index: -1;
            border-radius: 20%;
            box-shadow:
                0 0 0 0 #fff,
                0 0 0 0 #dda284;
            transition: all .2s ease;
            -webkit-transition: all .2s ease;
        }
        .btn07:hover::before {
            transform: scale(0.8);
            -webkit-transform: scale(0.8);
            box-shadow:
                0 0 0 25px #fff,
                0 0 0 27px #ff3333;
        }   }