.color-1 {
background: #0000FF;
position:relative;
height:100%;
width:100%;
 
}
.btna {
border: none;
font-family: inherit;
font-size: inherit;
color: inherit;
background:#FFCC00;
cursor: pointer;
padding: 5px 10px;
display: inline-block;
margin: 7px 20px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.btna2 {
border: none;
font-family: inherit;
font-size: inherit;
color: inherit;
background:rgba(0,200,150,.35);
cursor: pointer;
padding: 5px 10px;
display: inline-block;
margin: 7px 20px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
/*  رنگ دور دکمه 1 */
.btn-1 {
border: 3px solid #FFFFFF;
color: #fff;
z-index: 1;
}
 
.btna:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
 

 
/* Button 1d */
.btn-1d {
overflow: hidden;
}
 
.btn-1d:after {
width: 0;
height: 103%;
top: 50%;
left: 50%;
background: #fff;
opacity: 0;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
 
.btn-1d:hover,
.btn-1d:active {
color: #0e83cd;
}
 
.btn-1d:hover:after {
width: 90%;
opacity: 1;
}
 
.btn-1d:active:after {
width: 101%;
opacity: 1;
}
 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 .btn-1 {
border: 3px solid #FFFFFF;
color: #fff;
z-index: 1;
}
 
.btna:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}