Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Заголовок документа</title> <style> body { margin: 0; } .wrapper { display: flex; height: 20vh; flex-direction: row; justify-content: center; align-items: center; } .button { border: 1px transparent; -webkit-border-radius: 40px; border-radius: 40px; color: #eeeeee; cursor: pointer; display: inline-block; font-family: Arial; font-size: 20px; padding: 8px 30px; text-align: center; text-decoration: none; margin-left: 20px; -webkit-animation: glowing 1300ms infinite; -moz-animation: glowing 1300ms infinite; -o-animation: glowing 1300ms infinite; animation: glowing 1300ms infinite; } @-webkit-keyframes glowing { 0% { background-color: #0091b2; -webkit-box-shadow: 0 0 3px #0091b2; } 50% { background-color: #21c7ed; -webkit-box-shadow: 0 0 15px #21c7ed; } 100% { background-color: #0091b2; -webkit-box-shadow: 0 0 3px #0091b2; } } @keyframes glowing { 0% { background-color: #0091b2; box-shadow: 0 0 3px #0091b2; } 50% { background-color: #21c7ed; box-shadow: 0 0 15px #21c7ed; } 100% { background-color: #0091b2; box-shadow: 0 0 3px #0091b2; } } .svg-btn { display: block; width: 230px; height: 230px; margin-left: 10px; } svg { fill: blue; -webkit-animation: glowing-polygon 1300ms infinite; -moz-animation: glowing-polygon 1300ms infinite; -o-animation: glowing-polygon 1300ms infinite; animation: glowing-polygon 1300ms infinite; } @-webkit-keyframes glowing-polygon { 0% { fill: #0091b2; -webkit-filter: drop-shadow( 0 0 3px #0091b2); } 50% { fill: #21c7ed; -webkit-filter: drop-shadow( 0 0 15px #21c7ed); } 100% { fill: #0091b2; -webkit-filter: drop-shadow( 0 0 3px #0091b2); } } @keyframes glowingPolygon { 0% { fill: #0091b2; filter: drop-shadow( 0 0 3px #0091b2); } 50% { fill: #21c7ed; filter: drop-shadow( 0 0 15px #21c7ed); } 100% { fill: #0091b2; filter: drop-shadow( 0 0 3px #0091b2); } } </style> </head> <body> <h2>Создайте мигающую/светящуюся кнопку</h2> <div class="wrapper"> <a class="button" href="#">Нажмите сюда!</a> <button type="submit" class="button">Нажмите сюда!</button> <a class="svg-btn"> <svg height="210" width="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill: #0091b2;"/> </svg> </a> </div> </body> </html>