Cara Custom Button dengan CSS Tanpa Framework

Pada perkembangan website saat ini bisa dibilang sangat up to date, apalagi dengan adanya web framework yang memudahkan si programmer frontend untuk merancang tampilan website sesuai dengan kebutuhan klien atau perusahaan. Web framework ini diharapkan si programmer frontend tidak pusing untuk mengetik kode script dari nol sehingga dapat mempersingkat waktu dalam pengerjaan pada project.

CSS singkatan dari Cascading Style Sheets. CSS adalah salah satu bahasa markup yang berfungsi khusus untuk merancang tampilan pada website agar hasil tampilan website ini maksimal dan sesuai kebutuhan klien atau perusahaan.

Namun, disini akan mempelajari bagaimana cara custom button dengan CSS dasar. Karena apabila kamu mengerti dalam kode script CSS dasar, pasti bisa membuat custom button menggunakan framework seperti Bootstrap.

Berikut ini beberapa cara untuk custom button dengan CSS tanpa framework.

A. Membuat Beberapa button dengan HTML.

1. Silahkan aktifkan teks editor seperti Notepad++, Sublime, Visual Code, dan sebagainya.

2. Silahkan ketik kode script di bawah ini.

<html>
<head>
<title> Custom Button dengan CSS Tanpa Framework</title>
</head>
<body>
<p align="justify">
Silahkan klik button di bawah ini :
</p>
<button type="Button" class="button1">
Klik Website Inwepo.co
</button>
</body>
</html>

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “custombutton.html”.

5. Klik Save.

Cara Custom Button dengan CSS Tanpa Framework 1

6. Carilah file yang tadi, kemudian double klik atau klik kanan pada mouse – Open With  – Web Browser app (Chrome atau Mozilla).

Cara Custom Button dengan CSS Tanpa Framework 2

Lihatlah hasilnya.

Cara Custom Button dengan CSS Tanpa Framework 3

B. Mengatur Custom button dengan CSS.

Sekarang tinggal tambahkan atribut tag <style> yang terletak di atas atribut tag <body>.

<style>
</style>

1. Mengatur teks pada button.

Tambahkan kode script berikut ini.

.button1{
  font-family: verdana;
  font-size: 20px;
  color: #6733fa;
}

Kode script ini terletak di antara tag <style> dengan </style>. Setelah itu tekan CTRL + S lagi.

Silahkan tekan F5 pada web browser kamu. Lihat hasilnya.

Cara Custom Button dengan CSS Tanpa Framework 4

Keterangan:

font-family berfungsi untuk mengatur jenis teks.

font-size berfungsi untuk mengatur ukuran teks.

color berfungsi untuk mengatur warna teks.

2. Mengatur warna background pada button

Tambah kode script berikut ini.

.button1{
  background: #43ff45;
}

Kode script ini terletak di antara tag <style> dengan </style>. Setelah itu tekan CTRL + S lagi.

Silahkan tekan F5 pada web browser kamu. Lihat hasilnya.

Cara Custom Button dengan CSS Tanpa Framework 5

3. Mengatur ukuran pada button

Tambahkan kode berikut ini.

.button1{
  height: 50px;
  width: 100px;
}

Kode script ini terletak di antara tag <style> dengan </style>. Setelah itu tekan CTRL + S lagi.

Silahkan tekan F5 pada web browser kamu. Lihat hasilnya.

Cara Custom Button dengan CSS Tanpa Framework 6

Keterangan :

height berfungsi untuk mengatur ukuran secara vertikal.

width berfungsi untuk mengatur ukuran secara horizontal.

C. Membuat Custom Button Secara Keseluruhan.

Silahkan ketik kode script di bawah ini.

<html>
<head>
<title> Custom Button dengan CSS Tanpa Framework</title>
</head>
<style>
.button1{
  font-family: verdana;
  font-size: 14px;
  color: #75629a;
  background: #eeeeee;
  height: 50px;
  width: 130px;
}
</style>
<body>
<p align="justify">
Silahkan klik button di bawah ini :
</p>
<button type="Button" class="button1">
Klik Website Inwepo.co
</button>
</body>
</html>

1. Simpan hasil kode script tadi dengan tekan CTRL + S.

2. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “custombutton.html”.

3. Klik Save.

Cara Custom Button dengan CSS Tanpa Framework 7

4. Carilah file yang tadi, kemudian double klik atau klik kanan pada mouse – Open With – Web Browser app (Chrome atau Mozilla).

Cara Custom Button dengan CSS Tanpa Framework 8

Lihat hasilnya.

Cara Custom Button dengan CSS Tanpa Framework 9

Kini, kamu bisa membuat custom button sesuai kebutuhan, apabila menggunakan web framework. Sebelum itu, kamu harus mempelajari penggunaan button pada CSS dari dasar.

Demikian tutorial cara custom button dengan CSS tanpa framework. Selamat mencoba.

Komentar

Leave a Reply

Your email address will not be published. Required fields are marked *

Trending Minggu Ini

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Ikuti Kami di Sosmed

Inwepo Navigasi

Tentang Kami             Beranda

Hubungi Kami             Panduan Penulis

Kebijakan Privasi

FAQ

Partner

Copyright © 2014 - 2023 Inwepo - All Rights Reserved.

To Top