css3 按钮悬停线条动画

<a>
  <span class="text">Hover me</span>
  <span class="line -right"></span>
  <span class="line -top"></span>
  <span class="line -left"></span>
  <span class="line -bottom"></span>
</a>
body {
  background: #2d2d2d;
}

a {
  position: fixed;
  cursor: pointer;
  top: 50vh;
  left: 50%;
  color: white;
  transform: translate3d(-50%, -50%, 0);
  padding: 0.7em calc(0.7em * 1.2);
  display: inline-block;
  border: 3px solid transparent;
  position: relative;
  font-size: 1.5em;
  letter-spacing: 0.07em;
}
a .text {
  font-family: proxima-nova;
  transform: translate3d(0, 0.7em, 0);
  display: block;
  transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1) 0.4s;
}
a:after {
  position: absolute;
  content: '';
  bottom: -3px;
  left: calc(0.7em * 1.2);
  right: calc(0.7em * 1.2);
  height: 3px;
  background: #f26522;
  z-index: -1;
  transition: transform 0.8s cubic-bezier(1, 0, 0.37, 1) 0.2s, right 0.2s cubic-bezier(0.04, 0.48, 0, 1) 0.6s, left 0.4s cubic-bezier(0.04, 0.48, 0, 1) 0.6s;
  transform-origin: left;
}

.line {
  position: absolute;
  background: #f26522;
}
.line.-right, .line.-left {
  width: 3px;
  bottom: -3px;
  top: -3px;
  transform: scale3d(1, 0, 1);
}
.line.-top, .line.-bottom {
  height: 3px;
  left: -3px;
  right: -3px;
  transform: scale3d(0, 1, 1);
}
.line.-right {
  right: -3px;
  transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.23s;
  transform-origin: top;
}
.line.-top {
  top: -3px;
  transition: transform 0.08s linear 0.43s;
  transform-origin: left;
}
.line.-left {
  left: -3px;
  transition: transform 0.08s linear 0.51s;
  transform-origin: bottom;
}
.line.-bottom {
  bottom: -3px;
  transition: transform 0.3s cubic-bezier(1, 0, 0.65, 1.01);
  transform-origin: right;
}

a:hover .text,
a:active .text {
  transform: translate3d(0, 0, 0);
  transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1) 0.4s;
}
a:hover:after,
a:active:after {
  transform: scale3d(0, 1, 1);
  right: -3px;
  left: -3px;
  transform-origin: right;
  transition: transform 0.2s cubic-bezier(1, 0, 0.65, 1.01) 0.17s, right 0.2s cubic-bezier(1, 0, 0.65, 1.01), left 0s 0.3s;
}
a:hover .line,
a:active .line {
  transform: scale3d(1, 1, 1);
}
a:hover .line.-right,
a:active .line.-right {
  transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.2s;
  transform-origin: bottom;
}
a:hover .line.-top,
a:active .line.-top {
  transition: transform 0.08s linear 0.4s;
  transform-origin: right;
}
a:hover .line.-left,
a:active .line.-left {
  transition: transform 0.08s linear 0.48s;
  transform-origin: top;
}
a:hover .line.-bottom,
a:active .line.-bottom {
  transition: transform 0.5s cubic-bezier(0, 0.53, 0.29, 1) 0.56s;
  transform-origin: left;
}

<h1>Fancy Buttons</h1>
<p>Hover over any button and enjoy the magic.</p>
<div class="buttons-coll">
  <button class="custom-btn btn-1">Read More</button>
  <button class="custom-btn btn-2">Read More</button>
  <button class="custom-btn btn-3"><span>Read More</span></button>
  <button class="custom-btn btn-4"><span>Read More</span></button>
  <button class="custom-btn btn-5"><span>Read More</span></button>
  <button class="custom-btn btn-6"><span>Read More</span></button>
  <button class="custom-btn btn-7">Read More</button>
  <button class="custom-btn btn-8">Read More</button>
  <button class="custom-btn btn-9">Read More</button>
  <button class="custom-btn btn-10">Read More</button>
  <button class="custom-btn btn-11">Read More</button>
</div>
<h1>Fancy Buttons</h1>
<p>Hover over any button and enjoy the magic.</p>
<div class="buttons-coll">
  <button class="custom-btn btn-1">Read More</button>
  <button class="custom-btn btn-2">Read More</button>
  <button class="custom-btn btn-3"><span>Read More</span></button>
  <button class="custom-btn btn-4"><span>Read More</span></button>
  <button class="custom-btn btn-5"><span>Read More</span></button>
  <button class="custom-btn btn-6"><span>Read More</span></button>
  <button class="custom-btn btn-7">Read More</button>
  <button class="custom-btn btn-8">Read More</button>
  <button class="custom-btn btn-9">Read More</button>
  <button class="custom-btn btn-10">Read More</button>
  <button class="custom-btn btn-11">Read More</button>
</div>

<img src="https://ws3.sinaimg.cn/large/005BYqpgly1fxguylqjfag30av06fmz9.jpg"/>
body {
  margin:0;
  background-color:#191919;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Helvetica,Sans-serif;
}
a {
  text-decoration:none;
  color:#FFF;
}
.rainbow-button {
  width:calc(20vw + 4px);
  height:calc(8vw + 4px);
  background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
  font-size:3vw;
  font-weight:bold;
}
.rainbow-button:after {
  content:attr(title);
  width:20vw;
  height:8vw;
  background-color:#191919;
  display:flex;
  align-items:center;
  justify-content:center;
}
.rainbow-button:hover {
  animation:slidebg 2s linear infinite;
}

@keyframes slidebg {
  to {
    background-position:20vw;
  }
}

 

<div class="contact-fp-wrap">
  <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
    <defs>
   <linearGradient id="logo-gradient" x1="50%" y1="0%" x2="75%" y2="100%" > 
            
            <stop offset="0%" stop-color="#F79533">
                <animate attributeName="stop-color" values="#F79533; #F37055; #EF4E7B; #A166AB; #5073B8; #1098AD; #07B39B; #6DBA82; #F79533" dur="4s" repeatCount="indefinite"></animate>
            </stop>

            <stop offset="100%" stop-color="#F79533">
                <animate attributeName="stop-color" values="#F37055; #EF4E7B; #A166AB; #5073B8; #1098AD; #07B39B; #6DBA82; #F79533; #F37055" dur="4s" repeatCount="indefinite"></animate>
            </stop>

        </linearGradient> 
  </defs>
    <rect class="booton" height="60" width="320" />
  </svg>
   <div class="booton-text">HOVER</div>
</div>
html, body {
  background: #333;
  height: 100%;
  overflow: hidden;
  text-align: center;
}

.contact-fp-wrap {
  height: 60px;
	margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
}

.booton {
  fill: transparent;
  stroke-dasharray: 140 540;
  stroke-dashoffset: -474;
  stroke-width: 8px;
  stroke: url('#logo-gradient');
}

.booton-text {
  color: #fff;
  font-family: 'Lato';
  font-size: 22px;
  letter-spacing: 8px;
  line-height: 32px;
  position: relative;
  top: -48px;
}

@keyframes draw {
  0% {
    stroke-dasharray: 140 540;
    stroke-dashoffset: -474;
    stroke-width: 8px;
  }
  100% {
    stroke-dasharray: 760;
    stroke-dashoffset: 0;
    stroke-width: 2px;
  }
}

.contact-fp-wrap:hover .booton {
  -webkit-animation: 0.5s draw linear forwards;
  animation: 0.5s draw linear forwards;
}

.page-foot-column {
  order: 0;
  flex: 1 1 auto;
  align-self: auto;
  padding: 1em;
  font-family: Lato;
}

a {
  color: inherit;
  text-decoration: none;
  
  &:hover {
    text-decoration: none;
  }
}

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<mashadinka></mashadinka>
<div class="col" id="model-1">
  <div class="card">
    <div class="f-card"><i class="material-icons">fingerprint</i></div>
    <div class="b-card"><i class="material-icons">favorite</i></div>
  </div>
</div>
<div class="col" id="model-2">
  <div class="card">
    <div class="f-card"><i class="material-icons">fingerprint</i></div>
    <div class="b-card"><i class="material-icons">favorite</i></div>
  </div>
</div>
<div class="col" id="model-3">
  <div class="card">
    <div class="f-card"><i class="material-icons">fingerprint</i></div>
    <div class="b-card"><i class="material-icons">favorite</i></div>
  </div>
</div>
<div class="col" id="model-4">
  <div class="card">
    <div class="f-card"><i class="material-icons">fingerprint</i></div>
    <div class="b-card"><i class="material-icons">favorite</i></div>
  </div>
</div>
<div class="col" id="model-5">
  <div class="card">
    <div class="f-card"><i class="material-icons">fingerprint</i></div>
    <div class="b-card"><i class="material-icons">favorite</i></div>
  </div>
</div>
<div class="col" id="model-6">
  <div class="card">
    <div class="f-card"><i class="material-icons">fingerprint</i></div>
    <div class="b-card"><i class="material-icons">favorite</i></div>
  </div>
</div>
<div class="col" id="model-7">
  <div class="card">
    <div class="f-card"><i class="material-icons">fingerprint</i></div>
    <div class="b-card"><i class="material-icons">favorite</i></div>
  </div>
</div>
<div class="col" id="model-8">
  <div class="card">
    <div class="f-card"><i class="material-icons">fingerprint</i></div>
    <div class="b-card"><i class="material-icons">favorite</i></div>
  </div>
</div>
<div class="col" id="model-9">
  <div class="card">
    <div class="f-card"><i class="material-icons">fingerprint</i></div>
    <div class="b-card"><i class="material-icons">favorite</i></div>
  </div>
</div>
<div class="col" id="model-10">
  <div class="card">
    <div class="f-card"><i class="material-icons">fingerprint</i></div>
    <div class="b-card"><i class="material-icons">favorite</i></div>
  </div>
</div>
<div class="col" id="model-11">
  <div class="card">
    <div class="f-card"><i class="material-icons">fingerprint</i></div>
    <div class="b-card"><i class="material-icons">favorite</i></div>
  </div>
</div>
<div class="col" id="model-12">
  <div class="card">
    <div class="f-card"><i class="material-icons">fingerprint</i></div>
    <div class="b-card"><i class="material-icons">favorite</i></div>
  </div>
</div>
<div class="col" id="model-13">
  <div class="card">
    <div class="f-card"><i class="material-icons">fingerprint</i></div>
    <div class="b-card"><i class="material-icons">favorite</i></div>
  </div>
</div>
<div class="col" id="model-14">
  <div class="card">
    <div class="f-card"><i class="material-icons">fingerprint</i></div>
    <div class="b-card"><i class="material-icons">favorite</i></div>
  </div>
</div>
<div class="col" id="model-15">
  <div class="card">
    <div class="f-card"><i class="material-icons">fingerprint</i></div>
    <div class="b-card"><i class="material-icons">favorite</i></div>
  </div>
</div>
<div class="col" id="model-16">
  <div class="card">
    <div class="f-card"><i class="material-icons">fingerprint</i></div>
    <div class="b-card"><i class="material-icons">favorite</i></div>
  </div>
</div>
<div class="col" id="model-17">
  <div class="card">
    <div class="f-card"><i class="material-icons">fingerprint</i></div>
    <div class="b-card"><i class="material-icons">favorite</i></div>
  </div>
</div>
<div class="col" id="model-18">
  <div class="card">
    <div class="f-card"><i class="material-icons">fingerprint</i></div>
    <div class="b-card"><i class="material-icons">favorite</i></div>
  </div>
</div>

 

*, *:after, *:before {
  box-sizing: border-box;
}

body {
  background: #F5F5F5;
  margin: 0;
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}

.col {
  display: inline-block;
  padding: 30px;
}

.card {
  width: 200px;
  height: 200px;
  margin: auto;
  position: relative;
  text-align: center;
  cursor: pointer;
}
.card:hover {
  z-index: 50;
}
.card .material-icons {
  line-height: 200px;
  font-size: 100px;
}
.card .f-card {
  width: 200px;
  height: 200px;
  position: absolute;
  box-shadow: 0 0 0 #eee;
  left: 0;
  top: 0;
  color: #555;
  background: #fff;
  z-index: 5;
  -webkit-transition: ease-in 0.3s;
  transition: ease-in 0.3s;
}
.card .b-card {
  width: 200px;
  height: 200px;
  background: #eee;
  color: #f53249;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 10px #ccc inset;
}
.card .b-card .material-icons {
  -webkit-animation: bb 1s infinite;
  animation: bb 1s infinite;
}

#model-1 .card:hover .f-card {
  box-shadow: 2px 0 3px #eee;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

#model-2 .card:hover .f-card {
  box-shadow: 2px 0 3px #eee;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

#model-3 .card {
  overflow: hidden;
}
#model-3 .card:hover .f-card {
  box-shadow: 0 2px 3px #eee;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}

#model-4 .card {
  overflow: hidden;
}
#model-4 .card:hover .f-card {
  box-shadow: 2px 0 3px #eee;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

#model-5 .card {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
#model-5 .card .f-card {
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
#model-5 .card:hover .f-card {
  box-shadow: 0 5px 10px #ddd;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

#model-6 .card {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
#model-6 .card .f-card {
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
#model-6 .card:hover .f-card {
  box-shadow: 5px 0 10px #eee;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

#model-7 .card {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
#model-7 .card .f-card {
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
#model-7 .card:hover .f-card {
  box-shadow: 0 -5px 10px #ddd;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

#model-8 .card {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
#model-8 .card .f-card {
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
#model-8 .card:hover .f-card {
  box-shadow: -5px 0 10px #eee;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

#model-9 .card {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
#model-9 .card .f-card {
  -webkit-transform-origin: 100% 0 0;
          transform-origin: 100% 0 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
#model-9 .card:hover .f-card {
  box-shadow: -5px 0 10px #eee;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

#model-10 .card {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
#model-10 .card .f-card {
  -webkit-transform-origin: 100% 100% 0;
          transform-origin: 100% 100% 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
#model-10 .card:hover .f-card {
  box-shadow: -5px 0 10px #eee;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

#model-11 .card {
  -webkit-perspective: 1500px;
          perspective: 1500px;
  overflow: hidden;
}
#model-11 .card .f-card {
  -webkit-transform-origin: 0 100% 0;
          transform-origin: 0 100% 0;
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
#model-11 .card:hover .f-card {
  box-shadow: -5px 0 10px #eee;
  -webkit-transform: rotateY(120deg);
  transform: rotateY(120deg);
}

#model-12 .card {
  -webkit-perspective: 2000px;
          perspective: 2000px;
  overflow: hidden;
}
#model-12 .card .f-card {
  -webkit-transform-origin: 0 100% 0;
          transform-origin: 0 100% 0;
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
#model-12 .card:hover .f-card {
  box-shadow: -5px 0 10px #eee;
  -webkit-transform: rotateX(120deg);
  transform: rotateX(120deg);
}

#model-13 .card .f-card {
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}
#model-13 .card:hover .f-card {
  box-shadow: none;
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
  visibility: hidden;
}

#model-14 .card {
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
  -webkit-transition: .2s ease-in;
  transition: .2s ease-in;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
}
#model-14 .card .b-card {
  position: absolute;
  top: 100%;
  -webkit-transition: .2s ease-in;
  transition: .2s ease-in;
  box-shadow: none;
  left: 0;
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
#model-14 .card:hover {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
}
#model-14 .card:hover .b-card {
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}

#model-15 .card {
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
  -webkit-transition: .2s ease-in;
  transition: .2s ease-in;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
}
#model-15 .card .b-card {
  position: absolute;
  top: 0;
  -webkit-transition: .2s ease-in;
  transition: .2s ease-in;
  box-shadow: none;
  left: 100%;
  -webkit-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
#model-15 .card:hover {
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
}
#model-15 .card:hover .b-card {
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}

#model-16 .card {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transition: .2s ease-in;
  transition: .2s ease-in;
}
#model-16 .card .f-card {
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  z-index: auto;
}
#model-16 .card .b-card {
  position: absolute;
  top: 0;
  box-shadow: none;
  z-index: auto;
  left: 0;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  visibility: hidden;
}
#model-16 .card:hover {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
#model-16 .card:hover .f-card {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
#model-16 .card:hover .b-card {
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  visibility: visible;
}

#model-17 .card {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transition: .2s ease-in;
  transition: .2s ease-in;
}
#model-17 .card .f-card {
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  z-index: auto;
}
#model-17 .card .b-card {
  position: absolute;
  top: 0;
  box-shadow: none;
  z-index: auto;
  left: 0;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  visibility: hidden;
}
#model-17 .card:hover {
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
#model-17 .card:hover .f-card {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
#model-17 .card:hover .b-card {
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  visibility: visible;
}

#model-18 .card:hover .f-card {
  opacity: 0;
}
@-webkit-keyframes bb {
  0% , 100% {
    -webkit-transform: scale(0.85, 0.85);
    transform: scale(0.85, 0.85);
  }
  50% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@keyframes bb {
  0% , 100% {
    -webkit-transform: scale(0.85, 0.85);
    transform: scale(0.85, 0.85);
  }
  50% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

 

未经允许不得转载:乔越博客 » css3 按钮悬停线条动画

赞 (0) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏