Monday, 8 May 2017

css3 HTML button Flash blinking




HTML


<a class="button" href="#">Click me!</a>


CSS

body {
  background: black;
}
.button {
  background-color: #004A7F;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  font-size: 20px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
}
@-webkit-keyframes glowing {
  0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
}

@-moz-keyframes glowing {
  0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -moz-box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
}

@-o-keyframes glowing {
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}

@keyframes glowing {
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}

.button {
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}

15 comments:

  1. Nice info about Php it’s reallyhelpful…. If it possible share some more tutorials……….

    ReplyDelete

  2. Very nice post here and thanks for it .I always like and such a super contents of these post.

    CEH Training In Hyderbad

    ReplyDelete
  3. Excellent information on your blog, thank you for taking the time to share with us. Amazing insight you have on this, it's nice to find a website that details so much information about different artists.
    Salesforce Training in Chennai

    Salesforce Online Training in Chennai

    Salesforce Training in Bangalore

    Salesforce Training in Hyderabad

    Salesforce training in ameerpet

    Salesforce Training in Pune

    Salesforce Online Training

    Salesforce Training

    ReplyDelete
  4. Thank you for sharing this useful article with us. This blog is a very helpful to me in future. Keep sharing informative articles with us.

    https://www.ahmedabadcomputereducation.com/course/laravel-training-course/

    ReplyDelete
  5. Awesome blog for knowledge. Thank you for sharing this useful article. This blog is a very helpful to me. Keep sharing this type informative articles with us.

    https://www.france-collectivites.fr/

    ReplyDelete
  6. Thank you for sharing this useful article. This blog is a very helpful to me. Keep sharing informative articles.

    https://www.sdsfin.in/about-us/

    ReplyDelete
  7. Excellent Article to read. Thank you Keep Sharing

    https://web30india.com/

    ReplyDelete
  8. Thank you for sharing this useful article. This blog is a very helpful to me. Keep sharing informative articles.

    https://livewellhospital.com/

    ReplyDelete

  9. Infycle Technologies in Chennai offers the leading Big Data Hadoop Training in Chennai for tech professionals and students at the best offers. In addition to the Python course, other in-demand courses such as Data Science, Big Data Selenium, Oracle, Hadoop, Java, Power BI, Tableau, Digital Marketing also will be trained with 100% practical classes. Dial 7504633633 to get more info and a free demo.

    ReplyDelete
  10. I'd like to thank you for taking the time and making the effort to write this post. I anticipate that you will continue to perform at a high level in the future.
    Thank you for sharing your  post.

    software testing institute in Hyderabad

    ReplyDelete