"People card with Tabs"
Bootstrap 3.3.0 Snippet by okrish

<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 ----------> <div class="cs-wrapper"> <div class="cs-buttons-table"> <ul class="cs-buttons-list"> <li><a class="cs-button is-flashing--normal" href="#"><span>Flashing--Normal</span></a></li> <li><a class="cs-button is-flashing--colored" href="#"><span>Flashing--Colored</span></a></li> </ul> </div> </div>
.cs-wrapper { width: 100vw; height: 100vh; background-color: white; } .cs-buttons-table { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; } .cs-buttons-list > li + li { margin-top: 20px; } .cs-button { overflow: hidden; position: relative; display: inline-block; padding: 6px 10px; border-radius: 4px; background-color: orange; background-image: -webkit-linear-gradient(top, #ffc04d, orange); background-image: linear-gradient(to bottom, #ffc04d, orange); font-family: monospace; font-size: 28px; text-decoration: none; color: white; -webkit-transition: opacity 300ms ease-in; transition: opacity 300ms ease-in; } .cs-button:hover { opacity: 0.75; } .cs-button:before { content: ''; position: absolute; display: block; top: -10px; left: -50%; bottom: -10px; width: 20px; -webkit-transform: rotate(15deg); transform: rotate(15deg); } .cs-button.is-flashing--normal:before, .cs-button.is-flashing--colored:before { -webkit-animation: flashing 4000ms ease 2000ms infinite; animation: flashing 4000ms ease 2000ms infinite; } @-webkit-keyframes flashing { 0% { opacity: 1; left: -50%; } 50% { opacity: 1; left: 150%; } 51% { opacity: 0; left: 150%; } 99% { opacity: 0; left: -50%; } 100% { opacity: 0; left: -50%; } } @keyframes flashing { 0% { opacity: 1; left: -50%; } 50% { opacity: 1; left: 150%; } 51% { opacity: 0; left: 150%; } 99% { opacity: 0; left: -50%; } 100% { opacity: 0; left: -50%; } } .cs-button.is-flashing--normal:before { background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), white); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), white); } .cs-button.is-flashing--colored:before { background-image: -webkit-linear-gradient(left, rgba(255, 255, 0, 0), yellow); background-image: linear-gradient(to right, rgba(255, 255, 0, 0), yellow); } .cs-button > span { position: relative; text-shadow: 0 0 2px darkorange; }

Related: See More


Questions / Comments: