Desain Button dengan Animasi Border

14/08/2019    Risman Hakim    291     Website

Desain Button dengan Animasi Border - Membuat animasi sederhana pada sebuah elemen bisa kita lakukan dengan CSS3, seperti pergerakan objek dan masih banyak lagi. Salah satu contoh berikut ini yang akan saya bagikan adalah bagaimana animasi akan ditambahakan pada sebuah elemen button. Menarik bukan ? Nah, bagaiamana cara membuatnya, simak langkah - langkah membuat Desain Button dengan Animasi Border berikut ini.

Langkah pertama untuk membuat animasi pada button adalah membuat satu elemen terlebih dahulu yaitu sebuah button, yang bisa kalian buat seperti berikut.

<body>
    <div class="container">
      <button>
        Submit
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
</body>

Langkah selanjutnya, setelah membuat satu buah button seperti diatas adalah membuat animasi border pada elemen button agar button tentunya agar button mempunyai style yang beda dari yang lain dan terlihat lebih menarik. untuk itu silahkan kalian bisa ketikan kode CSS untuk membuatkan animasi pada border berikut ini.

body{
    padding:0px;
    margin: 0px;
    background-color: #009688;
    width:100%;
    height:100vh;
}
.container{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width: fit-content;
    height:auto;
}
button{
    width:200px;
    height:70px;
    background: #00695C;
    border-style: none;
    color:#fff;
    font-size: 23px;
    letter-spacing: 3px;
    font-family: 'Lato';
    font-weight: 600;
    outline: none;
    cursor: pointer;
    position: relative;
    padding: 0px;
    overflow: hidden;
    transition: all .5s;
    box-shadow: 0px 1px 2px rgba(0,0,0,.2);
}
button span{
    position: absolute;
    display: block;
}
button span:nth-child(1){
    height: 3px;
    width:200px;
    top:0px;
    left:-200px;
    background: linear-gradient(to right, rgba(0,0,0,0), #f6e58d);
    border-top-right-radius: 1px;
    border-bottom-right-radius: 1px;
    animation: span1 2s linear infinite;
    animation-delay: 1s;
}

@keyframes span1{
    0%{
        left:-200px
    }
    100%{
        left:200px;
    }
}
button span:nth-child(2){
    height: 70px;
    width: 3px;
    top:-70px;
    right:0px;
    background: linear-gradient(to bottom, rgba(0,0,0,0), #f6e58d);
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    animation: span2 2s linear infinite;
    animation-delay: 2s;
}
@keyframes span2{
    0%{
        top:-70px;
    }
    100%{
        top:70px;
    }
}
button span:nth-child(3){
    height:3px;
    width:200px;
    right:-200px;
    bottom: 0px;
    background: linear-gradient(to left, rgba(0,0,0,0), #f6e58d);
    border-top-left-radius: 1px;
    border-bottom-left-radius: 1px;
    animation: span3 2s linear infinite;
    animation-delay: 3s;
}
@keyframes span3{
    0%{
        right:-200px;
    }
    100%{
        right: 200px;
    }
}

button span:nth-child(4){
    height:70px;
    width:3px;
    bottom:-70px;
    left:0px;
    background: linear-gradient(to top, rgba(0,0,0,0), #f6e58d);
    border-top-right-radius: 1px;
    border-top-left-radius: 1px;
    animation: span4 2s linear infinite;
    animation-delay: 4s;
}
@keyframes span4{
    0%{
        bottom: -70px;
    }
    100%{
        bottom:70px;
    }
}

button:hover{
    transition: all .5s;
    transform: rotate(-3deg) scale(1.1);
    box-shadow: 0px 3px 5px rgba(0,0,0,.4);
}
button:hover span{
    animation-play-state: paused;
}

Setelah kalian mengetikan kode HTML dan CSS diatas, selanjutnya silahkan kalian simpan filenya dan kalian bisa membuka hasil kahirnya pada browser masing - masing.

Baiklah, sampai disini langkah - langkah untuk membuat Desain Button dengan Animasi Border telah selesai dan selesai juga tutorial bagaimana membuat Desain Button dengan Animasi Border. Semoga bermanfaat, selamat mencoba dan sampai jumpa lagi ditutorial selanjutnya :)

Web Design, HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More