.light-container1, .light-container2 { background:rgb(51, 51, 51); width: 150px; height: 440px; border-radius: 10px; font-size: 70px; text-align:center; padding: 1px 0; border: 6px solid #000; margin: 30px 30px; } .light-container3, .light-container4 { background:rgb(51, 51, 51); width: 150px; height: 380px; border-radius: 10px; font-size: 70px; text-align:center; padding: 5px 0; border: 6px solid #000; margin: 30px 30px; } .circle, .round, .series { background:grey; width: 120px; height: 120px; border-radius: 50%; margin-left: 15px; margin-top: 20px; line-height: 120px; -webkit-transition: background-color 0.5s ease-out; -o-transition: background-color 0.5s ease-out; transition: background-color 0.5s ease-out; } /*Добавляем фоновый цвет*/ .circleBGColor1, .roundBGColor1 { background-color: #f00; } .circleBGColor2 { background-color: #ff0; } .circleBGColor3, .roundBGColor3 { background-color: #0f0; } /*Добавляем текстовый цвет*/ .circleColor1 { color: #f00; } .circleColor2 { color: #0f0; } .roundColor1 { color: rgb(245, 209, 209); } .roundColor2 { color: rgb(91, 128, 96); } .btn, #btn { display: inline-block; padding: 16px 12px; font-size: 16px; font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; outline: none; color: #fff; background-color: #4CAF50; border: none; border-radius: 15px; box-shadow: 0 6px #999; } .btn, #btn:active { background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px); } button[disabled]{ background: #D4D4D4; } #btn[disabled]{ background: #D4D4D4; }