How to implement the alarm button in html

This article is about how html implements the alarm button. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The effect is as follows:

The code is as follows (click to expand to view the source code):

Alarm button / * Place all stylesheet code here * / body {background: # 333; text-shadow: 0 1px 1px rgba;} @-webkit-keyframes bigAssButtonPulse {from {background-color: # 1e6a0f;-webkit-box-shadow: 0 25px # 333;} 50% {background-color: # 39ba1f;-webkit-box-shadow: 0 75px # 39ba1f;} to {background-color: # 1e6a0f;-webkit-box-shadow: 0 25px # 333 } @-webkit-keyframes greenPulse {from {background-color: # 1e6a0f;-webkit-box-shadow: 0 9px # 333;} 50% {background-color: # 39ba1f;-webkit-box-shadow: 0 27px # 39ba1f;} to {background-color: # 1e6a0f;-webkit-box-shadow: 0 9px # 333;} @-webkit-keyframes bluePulse {background-color: # 036075;-webkit-box-shadow: 0 9px # 333 } 50% {background-color: # 2daebf;-webkit-box-shadow: 00 27px # 2daebf;} to {background-color: # 036075;-webkit-box-shadow: 00 9px # 333;}} @-webkit-keyframes redPulse {from {background-color: # 8c2305;-webkit-box-shadow: 00 9px # 333;} 50% {background-color: # e33100;-webkit-box-shadow: 00 27px # e33100 } to {background-color: # 8c2305;-webkit-box-shadow: 0 9px # 333;}} @-webkit-keyframes magentaPulse {from {background-color: # 470123;-webkit-box-shadow: 0 9px # 333;} 50% {background-color: # a9014b;-webkit-box-shadow: 0 27px # a9014b;} to {background-color: # 470123;-webkit-box-shadow: 0 9px # 333 } @-webkit-keyframes orangePulse {from {background-color: # b84c04;-webkit-box-shadow: 00 9px # 333;} 50% {background-color: # ff5c00;-webkit-box-shadow: 00 27px # ff5c00;} to {background-color: # b84c04;-webkit-box-shadow: 00 9px # 333;} @-webkit-keyframes orangellowPulse {from {background-color: # bd5000;-webkit-box-shadow: 00 9px # 333 } 50% {background-color: # ffb515;-webkit-box-shadow: 00 27px # ffb515;} to {background-color: # bd5000;-webkit-box-shadow: 00 9px # 333;}} a.button {- webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}. Green.button {- webkit-animation-name: greenPulse;animation-name: greenPulse;-webkit-animation-duration: 2s Blue.button {- webkit-animation-name: bluePulse;-webkit-animation-duration: 2s;}. Red.button {- webkit-animation-name: redPulse;-webkit-animation-duration: 2s;}. Magenta.button {- webkit-animation-name: magentaPulse;-webkit-animation-duration: 2s;}. Orange.button {- webkit-animation-name: orangePulse;-webkit-animation-duration: 2s;}. Orangellow.button {- webkit-animation-name: orangellowPulse -webkit-animation-duration: 2s;} .wall-of-buttons {width: 100%; height: 500px; text-align: center;} .wall-of-buttons a.button {display: inline-block; margin: 0 30px 30px 0;} / * playground.css * / .button {background: # 222url (overlay-button.png) repeat-x 00; display: inline-block; padding: 5px 15px 6px; color: # fff! important; font-size: 13px; font-weight: bold; line-height: 1 Text-decoration: none;-moz-border-radius: 5px;-webkit-border-radius: 5px;-moz-box-shadow: 0 1px 3px rgba;-webkit-box-shadow: 0 1px 3px rgba; text-shadow: 0-1px 1px rgba; border-bottom: 1px solid rgba; position: relative; cursor: pointer; overflow: auto;} button::-moz-focus-inner {border: 0 Padding: 0;}. Button:hover {background-color: # 111; color: # fff;}. Button:active {- webkit-transform: translateY (1px);-moz-transform: translateY (1px);} / * Small Buttons * / .small.button {font-size: 11px;} / * Large Buttons * / .large.button {font-size: 14px; padding: 8px 19px 9px;} / * Colors for our beloved buttons * / .green.button {background-color: # 91bd09 } .green.button:hover {background-color: # 749a02;} .blue.button {background-color: # 2daebf;} .blue.button:hover {background-color: # 007d9a;} .red.button {background-color: # e33100;} .red.button:hover {background-color: # 872300;} .magenta.button {background-color: # a9014b;} .magenta.button:hover {background-color: # 630030;} .orange.button {background-color: # ff5c00 }. Orange.button:hover {background-color: # d45500;}. Orangellow.button {background-color: # ffb515;}. Orangellow.button:hover {background-color: # fc9200;}. White.button {background-color: # fff; border: 1px solid # ccc; color: # 666! important; font-weight: normal; text-shadow: 0 1px 1px rgba;}. White.button:hover {background-color: # eee;}

Normal operation is serious, primary and secondary

Thank you for reading! This is the end of the article on "how to implement the alarm button in html". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!