<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">
    
<div class="container"><a href="#"><i class="fas fa-play"></i></a><span>Play Video</span></div>
<p>GlitchY-Made-Another-one</p>
        body {
          background-image: linear-gradient(to right top, #702292, #941991, #b50d8c, #d20584, #eb127a);
            background-repeat: no-repeat;
  background-attachment: fixed;
  background-size:cover;
          overflow:hidden;
        }

        .container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 50px;

        }

        a {
            text-decoration: none;
            background-image: linear-gradient(to right, #6400a4, #5e07b5, #5411c6, #411bd8, #1225eb);
            border: 2px dotted white;
            color: aliceblue;
            border-radius: 50%;
            padding: 15px;
            position: relative;
        }

        a::after {
            position: absolute;
            content: '';
            bottom: -7px;
            top: -7px;
            left: -7px;
            right: -7px;
            background-color: transparent;
            border-radius: 50%;
            border: 4px solid #fff;
            margin: 0px;
            opacity: 1;
            transform-origin: center;
            animation: anim 800ms linear infinite;
        }

        a::before {
            position: absolute;
            content: '';
            bottom: -7px;
            top: -7px;
            left: -7px;
            right: -7px;
            background-color: transparent;
            border-radius: 50%;
            border: 4px solid #fff;
            margin: 0px;
            opacity: 0.8;
            transform-origin: center;
            animation: anim 800ms linear 400ms infinite;
        }

        @keyframes anim {
            from {
                margin: 0px;
                opacity: 1;
            }

            to {
                margin: -15px;
                opacity: 0;
            }
        }

        span {
            color: #fff;
            font-family: sans-serif;
            font-weight: 600;
            margin-left: 20px;
        }
p{font-family: 'Poppins', sans-serif;color: #fff;
    text-align: center;
    line-height: 20pt;
    font-size: 15px;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.