Di postingan kali ini, aku akan menunjukkan Script CSS Buton with hover Line, script ini dibentuk oleh Luke Meyrick saya disini hanya membagikan ulang ke kalian, terutama yang suka design atau yang buat template,
jadi pribadi saja ke intinya.
Berikut CSSnya
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: 5px 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: -5px; left: calc(0.7em * 1.2); right: calc(0.7em * 1.2); height: 5px; background: #4d90fe; 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: #4d90fe; } .line.-right, .line.-left { width: 5px; bottom: -5px; top: -5px; transform: scale3d(1, 0, 1); } .line.-top, .line.-bottom { height: 5px; left: -5px; right: -5px; transform: scale3d(0, 1, 1); } .line.-right { right: -5px; transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.23s; transform-origin: top; } .line.-top { top: -5px; transition: transform 0.08s linear 0.43s; transform-origin: left; } .line.-left { left: -5px; transition: transform 0.08s linear 0.51s; transform-origin: bottom; } .line.-bottom { bottom: -5px; 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: -5px; left: -5px; 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; } untuk isyarat manmpilkannya, gunakan HTML dibawah ini.
<a> <span class="text">ABDURRAHIM-ID</span> <span class="line -right"></span> <span class="line -top"></span> <span class="line -left"></span> <span class="line -bottom"></span> </a> Untuk demonya silahkan klik demo dibawah.
