#boton1 {
width: 340px;
 padding:0px;
 margin:0px;
  color: #ddf;
  background-color: #ffffff;
  
  
}
@media screen and (max-width:320px) 
{
#boton1 {
  width: 100%;
  padding:0px;
  margin:0px;
  color: #ddf;
  
}
}
@media screen and (max-width:240px) 
{
#boton1 {
  width: 100%;
  padding:0px;
  margin:0px;
  color: #ddf;
  
}
}


.button1,
.button1::before,
.button1::after,
.button1 span,
.button1 span::before,
.button1 span::after
{
  -webkit-transition: all ease .5s;
  transition: all ease .5s;
}

.button1{
  color:#FFFFFF;
  width:300px;
  background-color: #828282;
  position: relative;
  display: inline-block;
  padding: 0.3em;
  margin: 1em;
  border: solid 1px;
  text-transform: uppercase;
  cursor: pointer;
  
}
@media screen and (max-width:320px) 
{
.button1{
  color:#FFFFFF;
  width:245px;
  background-color: #828282;
  position: relative;
  display: inline-block;
  padding: 0.3em;
  margin: 1em;
  border: solid 1px;
  text-transform: uppercase;
  cursor: pointer;
  
}
}
@media screen and (max-width:240px) 
{
.button1{
  color:#FFFFFF;
  width:200px;
  background-color: #828282;
  position: relative;
  display: inline-block;
  padding: 0.3em;
  margin: 1em;
  border: solid 1px;
  text-transform: uppercase;
  cursor: pointer;
  
}
  
}
}

.button1:hover
{
  box-shadow: 0 0 5em .5em rgba(50,50,150,0.5);
}

.button1 span
{
  display: inline-block;
  width: 100%;
  padding: 0.6em 2em;
}

.button1:hover span
{
  background-color: #fff;
  color: #112;
}

.button1::before,
.button1::after,
.button1 span::before,
.button1 span::after
{
  content: '';
  position: absolute;
  border: 1px;
}

.button1::before,
.button1 span::before
{
  border-style: solid none;  
}

.button1::before,
.button1 span::after{      
  left: 0;
  top: -0.4em;
  width: 100%; 
  height: calc(100% + 0.8em);
}

.button1::after,
.button1 span::after
{
  border-style: none solid;   
}

.button1::after,
.button1 span::before
{
  top: 0;
  left: -0.4em;
  height: 100%;
  width: calc(100% + 0.8em); 
}

.button1:hover::after,
.button1:hover span::after
{
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}

.button1:hover::before,
.button1:hover span::before
{
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

.button1:hover span::after,
.button1:hover span::before
{
  opacity: 0;
}