"Random Color"
Bootstrap 3.3.0 Snippet by srengkhorn

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> </head> <div class="container"> <div class="row"> <h1 class="text-center">ស្រេង ខន</h1> <h1 class="text-center">SRENG KHORN</h1> <h2 class="text-center"><a href="http://sayonn.com" target="_blank">www.sayonn.com</a></h2> <div class="col-md-12 text-center"> <a href="http://sayonn.com" class="btn btn-danger btn-lg" target="_blank">learn more</a> </div> </div> <div class="row"> <div class="col-md-6"> </div> </div> </div>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:800'); body { padding-top: 15px; } .container { padding-top: 5em; } h1, h2 { padding: 5px; font-family: 'Open Sans', sans-serif; } h2 > a:hover { text-decoration: none; } .btn { border-radius: 50px; border: 0; color: #fff; border-bottom: 2px solid #ccc; } .btn-danger { background: red; -webkit-animation: random 50s infinite; animation: random 50s infinite; } .btn-primary { background: blue; } /* Random Background Color */ @keyframes random { 15% { background-color: #D9534F; } 30% { background-color: #337AB7; } 45% { background-color: #5BC0DE; } 60% { background-color: #F0AD4E; } 75% { background-color: #FFFF00; } } /* Random Font Color */ h1 { color: #f35626; background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: hue 60s infinite linear; } h2 { color: #f35626; background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: hue 50s infinite linear; } @-webkit-keyframes hue { from { -webkit-filter: hue-rotate(0deg); } to { -webkit-filter: hue-rotate(360deg); } }

Related: See More

Paper Bootstrap Wizard
Flat color progress bars
Cool Alerts Alternate Color

Questions / Comments: