CSS/透過ボタンhoverアクション

a.btn{
  display: inline-block;
  width: 120px;
  margin: 20px 40px;
  padding: 15px 10px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  transition: .3s;
}

a.sample1:hover {
  border: 1px solid rgba(0,0,0,.9);
  color: rgba(0,0,0,.9);
}

a.sample2:hover {
  border: 1px solid rgba(0,0,0,.1);
  background: rgba(0,0,0,.2); 
}

a.sample3:hover {
  box-shadow: 0 0 20px 5px rgba(255,255,255,.3) inset;
}

a.sample4:hover {
  background: #fff;
  color: #555;
}

a.sample5 {
  position: relative;
  z-index: 2;
  overflow: hidden;
}
a.sample5::after {
  display: inline-block;
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.2);
  transition: .3s;
}
a.sample5:hover::after {
  width: 180px;
  height: 130px;
  margin: -65px 0px 0 -85px;
}

a.sample6 {
  position: relative;
  z-index: 2;
}
a.sample6::after {
  display: block;
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  margin: auto;
  background: rgba(0,0,0,.2);
  transition: .3s;
}
a.sample6:hover::after {
  width: 100%;
  height: 100%;
}

a.sample7 {
  position: relative;
  z-index: 2;
}
a.sample7::after {
  display: block;
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  margin: 0;
  background: rgba(0,0,0,.2);
  transition: .3s;
}
a.sample7:hover::after {
  width: 100%;
}

a.sample8 {
  position: relative;
  z-index: 2;
}
a.sample8::after {
  display: block;
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  margin: 0;
  background: rgba(0,0,0,.2);
  transition: .3s;
}
a.sample8:hover::after {
  height: 100%;
}

a.sample9 {
  position:relative;
  z-index:2;
  overflow:hidden
}
a.sample9::after {
  display:block;
  content:"";
  position:absolute;
  z-index:-1;
  top:50%;
  left:50%;
  width:130px;
  height:130px;
  margin:-65px 0 0 -65px;
  border:65px solid rgba(255,255,255,0);
  border-radius:50%;
  transition:.5s
}
a.sample9:hover::after {
  border-width:0;
  border-color:rgba(255,255,255,1)
}

a.sample10 {
  position:relative;
  z-index:2;
  overflow:hidden
}
a.sample10::after {
  display:block;
  content:"";
  position:absolute;
  z-index:-1;
  top:50%;
  left:50%;
  width:130px;
  height:130px;
  margin:-65px 0 0 -65px;
  border:65px dotted rgba(255,255,255,0);
  border-radius:50%;
  transition:.5s
}
a.sample10:hover::after {
  border-width:0;
  border-color: rgba(255,255,255,1)
}

.button {
    padding: 10px 40px;
    position: relative;
}

#sample11, #sample12 {
	margin: 40px;
}

.change-border01__inner,.change-border03__inner {
	color: #fff;
}
.change-border01::after,
.change-border01::before,
.change-border01__inner::after,
.change-border01__inner::before {
    background-color: #fff;
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}
.change-border01::after {
    height: 1px;
    left: -1px;
    top: -1px;
    width: 0px;
}
.change-border01::before {
    bottom: -1px;
    height: 1px;
    right: -1px;
    width: 0px;
}
.change-border01__inner::after {
    bottom: -1px;
    height: 0px;
    left: -1px;
    width: 1px;
}
.change-border01__inner::before {
    height: 0px;
    right: -1px;
    top: -1px;
    width: 1px;
}
.change-border01:hover::after,
.change-border01:hover::before {
    width: 100%;
    width: calc(100% + 1px);
}
.change-border01:hover .change-border01__inner::after,
.change-border01:hover .change-border01__inner::before {
    height: 100%;
    height: calc(100% + 1px);
}

.change-border03::after,
.change-border03::before,
.change-border03__inner::after,
.change-border03__inner::before {
    background-color: #fff;
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}
.change-border03::after {
    height: 1px;
    left: -1px;
    top: -1px;
    width: 0px;
    -webkit-transition-delay: .9s;
}
.change-border03::before {
    bottom: -1px;
    height: 1px;
    right: -1px;
    width: 0px;
    -webkit-transition-delay: .3s;
}
.change-border03__inner::after {
    bottom: -1px;
    height: 0px;
    left: -1px;
    width: 1px;
}
.change-border03__inner::before {
    height: 0px;
    right: -1px;
    top: -1px;
    width: 1px;
    -webkit-transition-delay: .6s;
}
/* hover */
.change-border03:hover::after,
.change-border03:hover::before {
    width: 100%;
    width: calc(100% + 1px);
}
.change-border03:hover .change-border03__inner::after,
.change-border03:hover .change-border03__inner::before {
    height: 100%;
    height: calc(100% + 1px);
}
.change-border03:hover::after,
.change-border03:hover::before,
.change-border03:hover .change-border03__inner::after,
.change-border03:hover .change-border03__inner::before {
    transition: none;
    -webkit-transition: none;
}