<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="dk">Hello, I'm KBall!</div> </div> <p> <button class="shiny">Shiny</button> </p> </div>

.dk:before { content: ""; background-image: url(https://lh3.googleusercontent.com/-5aLr6iJdX9M/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rdfvz4FrB_iw-RMZ2sS1VXtxHgurw/s64-c-mo/photo.jpg); background-size: cover; height: 30px; width: 30px; border-radius: 50%; margin-right: 5px; display: inline-block; vertical-align: middle; } /* buttan */ .shiny { background-color: #000; padding: 10px; color: white; border-radius: 5px; transition: 200ms ease-in; overflow: hidden; position: relative; } @keyframes sheen { 100% { transform: rotateZ(60deg) translate(1em, -9em); } } .shiny::after { content: ''; position: absolute; top: -50%; right: -50%; bottom: -50%; left: -50%; background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0)); transform: rotateZ(60deg) translate(-5em, 7.5em); } .shiny:hover::after, .shiny:focus::after { animation: sheen 1s forwards; }