"Animated UI elements using font awesome"
Bootstrap 4.1.1 Snippet by MMLTech

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Donation modal</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="style.css"/> </head> <body> <div class="container"> <div class="row"> <div class="col-12 mb-5 mt-3"> <h1>Animated UI elements with font awesome</h1> <hr> </div> <div class="col-xl-2 col-md-4 col-6"> <div class="ui-border-effect ui-info continuous"> <i class="fas fa-phone fa-2x"></i> <h6 class="m-0">Phone</h6> </div> </div> <div class="col-xl-2 col-md-4 col-6"> <div class="ui-border-effect ui-primary"> <i class="fas fa-user fa-2x"></i> <h6 class="m-0">User</h6> </div> </div> <div class="col-xl-2 col-md-4 col-6"> <div class="ui-border-effect ui-success"> <i class="fas fa-user-shield fa-2x"></i> <h6 class="m-0">Admin</h6> </div> </div> <div class="col-xl-2 col-md-4 col-6"> <div class="ui-border-effect ui-warning"> <i class="fas fa-money-bill fa-2x"></i> <h6 class="m-0">Money</h6> </div> </div> <div class="col-xl-2 col-md-4 col-6"> <div class="ui-border-effect ui-danger"> <i class="fas fa-chart-bar fa-2x"></i> <h6 class="m-0">Analytics</h6> </div> </div> <div class="col-xl-2 col-md-4 col-6"> <div class="ui-border-effect ui-purple"> <i class="fas fa-comment fa-2x"></i> <h6 class="m-0">Chat</h6> </div> </div> <div class="col-12 my-5"> <p>Use the <strong>continuous</strong> class to give the block an infinite motion without having to hover over it.</p> </div> </div> </div> </body> <div style="position: fixed;bottom: 5%;right: 5%;padding: 1rem;background: #fff;border: 1px solid #e9ecef;border-radius: 0.35rem;color: #a9aeb3;box-shadow: 0 0 20px #e9ecef;"> <h5 style="margin-bottom: 1rem;padding-bottom: 1rem;text-align: center;">Support my work @ MMLTech</h5> <div style="display: flex;align-items: center;"> <a style="margin-right:1rem;background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://ko-fi.com/mmltech" target="_blank"><img src="https://storage.ko-fi.com/cdn/Kofi_Logo_Blue.svg" width="60px"/> Buy me a coffee</a> <a style="background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://obscountdown.com" target="_blank"><img src="https://streamcd.net/Assets/images/logo-white.png" width="60px" height="19px" /> My projects</a> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </html>
.ui-border-effect { padding: 20px 0 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; } .ui-border-effect:before { content: ""; -webkit-transition: 0.5s; transition: 0.5s; border: 1px solid; border-radius: 30% 70% 70% 30%/30% 30% 70% 70%; will-change: border-radius; width: calc(100% - 40px); height: calc(100% - 40px); display: block; position: absolute; -webkit-animation: boldering 10s infinite paused; animation: boldering 10s infinite paused; top: -10px; left: 20px; } .ui-border-effect.continuous:before, .ui-border-effect:hover:before { -webkit-animation-play-state: running; animation-play-state: running; } .ui-border-effect.continuous i, .ui-border-effect:hover i { opacity: 1; } .ui-border-effect i { margin-bottom: 1rem; opacity: 0.5; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all; } .ui-border-effect.ui-info { color: #1DA1F2; } .ui-border-effect.ui-primary { color: #004b9d; } .ui-border-effect.ui-success { color: #218939; } .ui-border-effect.ui-warning { color: #cb9b08; } .ui-border-effect.ui-danger { color: #b23737; } .ui-border-effect.ui-purple { color: #7032c2; } @keyframes boldering { 0% { border-radius: 30% 70% 70% 30%/30% 30% 70% 70%; } 25% { border-radius: 58% 42% 75% 25%/76% 46% 54% 24%; } 50% { border-radius: 50% 50% 33% 67%/55% 27% 73% 45%; } 75% { border-radius: 33% 67% 58% 42%/63% 68% 32% 37%; } } /*# sourceMappingURL=style.css.map */

Related: See More

Paper Kit
Awesome Search Box
My Awesome Login Page
Animated Radio tab

Questions / Comments: