按钮hover对角拉出边框效果（思路简单的笨办法）

html

<div class="btn">
    click
    <div class="top-line"></div>
    <div class="bottom-line"></div>
    <div class="left-line"></div>
    <div class="right-line"></div>
</div>

css

.btn {
  width: 120px;
  height: 36px;
  background-color: #eee;
  font-size: 16px;
  border-radius: 0;
  position: relative;
  overflow: hidden; }
  .btn div {
    position: absolute;
    background-color: #0f52ba;
    transition: all .2s linear; }
  .btn .top-line {
    top: 0;
    left: -120px;
    width: 100%;
    height: 1px; }
  .btn .bottom-line {
    bottom: 0;
    right: -120px;
    width: 100%;
    height: 1px; }
  .btn .left-line, .btn .right-line {
    width: 1px;
    height: 100%; }
  .btn .left-line {
    left: 0;
    top: -36px; }
  .btn .right-line {
    right: 0;
    bottom: -36px; }
  .btn:hover .top-line {
    transform: translateX(120px); }
  .btn:hover .bottom-line {
    transform: translateX(-120px); }
  .btn:hover .left-line {
    transform: translateY(36px); }
  .btn:hover .right-line {
    transform: translateY(-36px); }