Button atau yang paling kita kenal sebagai Tombol merupakan bab penting yang ada dalam sebuah website.
Di internet terdapat aneka macam website khususnya blogger dan wordpress, biasanya sering kita jumpai URL / Link / Tautan yang mengarah ke halaman lain di situs tersebut.
URL / Link / Tautan ini kita modifikasi dengan memakai instruksi CSS sehingga menjadi sebuah tombol yang lebih menarik untuk di klik oleh setiap pengunjung situs tersebut.
Apalagi jikalau memakai pengaruh animasi pada instruksi CSS tersebut, niscaya akan lebih menarik perhatian orang yang melihatnya.
Tombol biasanya dipakai untuk mengajak pengunjung situs Anda untuk melaksanakan action atau agresi ketika sedang berada di dalamnya, misalnya mengajak pengunjung untuk menekan tombol buy atau beli, tombol subscribe atau berlangganan, tombol demo download, dan tombol lainnya.
Baca juga: Cara Membuat Tombol Back to Top di Blogger
Tombol ini memakai pure CSS dan tidak memakai Font Awesome sehingga tidak akan memberi beban yang berat pada loading blog Anda.
Untuk mempercantik tombol ini Anda sanggup menambahkan font awesome secara manual.
Bagi Anda yang tertarik untuk menciptakan button animated border on hover atau tombol dengan animasi garis ketika di sentuh cursor diatasnya, silahkan untuk menyimak langkah-langkahnya di bawah ini.
Cara Membuat Button Animation Border on Hover
Pertama, masukkan instruksi css ini di atas instruksi
]]></b:skin> atau </style>/* Button Animated Border on Hover */ @import url(https://fonts.googleapis.com/css?family=BenchNine:700); .btn-border { background-color: #c47135; border: none; color: #ffffff!important; cursor: pointer; display: inline-block; font-family: 'BenchNine', Arial, sans-serif; font-size: 1em; font-size: 22px; line-height: 1em; margin: 15px 40px; outline: none; padding: 12px 40px 10px; position: relative; text-transform: uppercase; font-weight: 700; } .btn-border:before, .btn-border:after { border-color: transparent; -webkit-transition: all 0.25s; transition: all 0.25s; border-style: solid; border-width: 0; content: ""; height: 24px; position: absolute; width: 24px; } .btn-border:before { border-color: #c47135; border-top-width: 2px; left: 0px; top: -5px; } .btn-border:after { border-bottom-width: 2px; border-color: #c47135; bottom: -5px; right: 0px; } .btn-border:hover { background-color: #c47135; } .btn-border:hover:before, .btn-border:hover:after { height: 100%; width: 100%; }Catatan:
- Untuk mengganti warnanya silahkan gunakan tool Color Picker.
- Untuk instruksi yang aku beti tanda bold / tebal merupakan instruksi jenis font yang digunakan, Anda sanggup menghapusnya atau mengubahnya menjadi jenis font lainnya.
Kedua, masukkan instruksi
class='btn-border' ini pada URL / Link / Tautan yang ingin di tambahkan pengaruh animasi border ini, contohnya:<a class='btn-border' href='https://codepen.io/FicriPebriyana/full/LmaaQE/' target='_blank' title='DEMO'>DEMO</a>Selesai, silahkan Anda coba mempraktekannya secara pribadi di blog Anda.
Jika mengalami masalah, silahkan hubungi kami melalui halaman kontak, kami akan bahagia membantu Anda.
Itulah artikel mengenai cara menciptakan tombol dengan pengaruh animasi border ketika di sentuh cursor, agar bermanfaat. Sumber https://www.caramanual.com/