/*
  Theme Name: CSS3 Glowing Effect Button
  Author: Mohammad Romin
  Author URI: https://www.facebook.com/mohammadromin03/
  Version: 1.0
*/
/************ TABLE OF CONTENTS ***************

  01. Button
  
***********************************************/
/** {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  display: -ms-grid;
  display: grid;
  height: 100%;
  place-items: center;
  /*background-color: #000;
  overflow: hidden;
}*/
/* 01. Button */
button.glow {
  position: relative;
  height: 60px;
  width: 200px;
    
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px; 
    margin-bottom: 30px; 
    justify-items: center;
  
  border-radius: 50px;
  border: none;
  outline: none;
  background: #F19000; /*F111 */
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: background 0.5s;
  transition: background 0.5s;
  /*font-family: 'Roboto', sans-serif;*/
}
button.glow:first-child:hover {
  background: -webkit-linear-gradient(left, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
}
button.glow:last-child:hover {
  background: -webkit-linear-gradient(left, #fa7199, #f5ce62, #e43603, #fa7199);
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
}
button.glow:first-child::before,
button.glow:last-child::before {
  content: '';
  position: absolute;
  background: inherit;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: 50px;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="20" /></filter></svg>#filter');
  -webkit-filter: blur(20px);
          filter: blur(20px);
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
button.glow:first-child:hover::before,
button.glow:last-child:hover::before {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  z-index: -1;
}
button.glow:hover {
  z-index: 1;
  -webkit-animation: glow 8s linear infinite;
          animation: glow 8s linear infinite;
}
@-webkit-keyframes glow {
  0%{
    background-position: 0%;
  }
  100%{
    background-position: 400%;
  }
}
@keyframes glow {
  0%{
    background-position: 0%;
  }
  100%{
    background-position: 400%;
  }
}