.btn { border-radius: 4px; } .btn:hover { opacity: 0.8; } .btn.btn-orange { background: #fb5531; } .btn.btn-primary { background: #0d96f0; } .btn.starting { display: block; width: 280px; height: 60px; font-size: 20px; color: #ccc; margin: 120px auto; margin-bottom: 20px; pointer-events: none; background: #f5f5f5; border: none; position: relative; } .btn.starting #progress-text { position: relative; z-index: 9; } #start, #stop { display: inline-block; vertical-align: middle; width: 200px; height: 280px; border-radius: 4px; background: #fff; margin: 80px 40px; transition: all 0.3s; transform: translate(0, 0); } #start:hover, #stop:hover { transform: translate(0, -2px); } #start.border-orange, #stop.border-orange { border: 1px solid #fb5531; } #start.border-orange:hover, #stop.border-orange:hover { box-shadow: 2px 2px 4px rgba(251, 85, 49, 0.4); } #start.border-blue, #stop.border-blue { border: 1px solid #0d96f0; } #start.border-blue:hover, #stop.border-blue:hover { box-shadow: 2px 2px 4px rgba(13, 150, 240, 0.6); } #start img, #stop img { display: block; height: 120px; margin: 52px auto; } #start button, #stop button { width: 180px; height: 40px; color: #ccc; padding: 8px 0; outline: none; border: none; font-size: 16px; } #progress-log, #progress-message { color: #fb5531; font-size: 16px; } #progress-log .progress-log-event, #progress-message .progress-log-event { border: none; } @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } #progress-bar { position: absolute; top: 0; left: 0; width: 0; border-radius: 4px; background-color: #fb5531; border: none; animation: progress-bar-stripes 2s linear infinite; background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 40px 40px; transition: width 0.6s ease; box-shadow: inset 0 -1px 0 #000000; height: 100%; } .running_container { margin: 0; margin-top: -20px; width: 100%; height: calc(100vh); padding: 0; position: relative; overflow: hidden; } .running_container .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .running_container .content { position: relative; z-index: 9; }