You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Tạo nút nhấn và tuỳ chỉnh nút nhấn bằng thẻ Button trong HTML

Tạo nút nhấn và tuỳ chỉnh nút nhấn bằng thẻ Button trong HTML

Bạn muốn có nút bấm. Chuyện nhỏ thôi. Chỉ cần bạn xem bài viết này là được.

Xem thêm bài viết

Hầu hết mọi người đều dễ bị thu hút khi nhìn thấy những người mình thần tượng làm đại diện cho một nhãn hàng nào đó. Chắc chắn bạn sẽ muốn tìm ngay những sản phẩm hot đó để có thể được giống như thần tượng. Đôi khi bạn mới truy cập vào một trang web nào đó. Bạn nhìn qua trang chủ. Sau đó bạn đọc cảm thấy thú vị với nội dung ở bên ngoài trang chủ. Một nút bấm xuất hiện ở đâu đó trong trang chủ đó. Bạn sẽ nhấn vào. Bạn có thắc mắc làm thế nào để tạo được một nút bấm như thế. Bạn muốn chúng cũng trông bắt mắt như trang web mà bạn thích. Tạo được nút trong HTML không khó.

Tạo nút bấm bằng thẻ nào?

Trong trường hợp này chắc không có bạn nào nghĩ về thuộc tính đâu. Bởi thực tế thuộc tính không thể nào tạo được nút bấm. Thế nên tường hợp này bạn nên sử dụng thẻ để tạo nút bấm. Chúng ta sẽ tạo nút bấm bằng thẻ Button. Thẻ Button trong HTML được tạo ra rất đơn giản. Có ba kiểu nút bấm trong thẻ Button. Kiểu Submit dùng cho các trường hợp lấy thông tin của người dùng. Kiểu này bạn sẽ được học kỹ trong phần Form trong HTML. Kiểu Button dùng để tạo nút bấm. Kiểu này không lấy thông tin của người dùng. Chỉ dẫn người dùng đến những trang đã được liên kết. Kiểu Reset không cần nói nhiều. Nghe tên thì bạn cũng đã biết thẻ này dùng để làm gì rồi. Chỉ với 3 kiểu thôi thì bạn cũng đã tạo được nhiều kiểu button rồi.

Cú pháp tạo Button

Cú pháp:

<button>Content</button>

Bạn thấy cú pháp của thẻ Button đơn giản. Bạn có thể thực hiện nhiều kiểu Button với những dòng chữ khác nhau. Chúng ta hãy cùng xem ví dụ cho việc tạo thẻ thôi nào.

Ví dụ

<!doctype html>
<html>

<head>
    <title>Trang web giới thiệu ẩm thực sáng tạo</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay" />
    <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn" />
    <link href="css/style.css" rel="stylesheet" type="text/css"/>

</head>

<body>
    <nav>
        <a href="try.html" class="main-menu">Trang chủ</a> |
        <a href="thuc-don.html" class="main-menu">Thực Đơn</a> |
        <a href="lien-he.html" class="main-menu">Liên Hệ</a>
    </nav>
    

    <h1>Ẩm thực 47 ngõ đường phố Sài Gòn</h1>
    <nav id="gola">
        <a href="#" class="main-top">Giới thiệu dự án</a> |
        <a href="#" class="main-top">Mục tiêu dự án</a> |
        <a href="#" class="main-top">Điểm nhấn dự án</a>
    </nav>
   
    
    <pre>
            Sài Gòn không giống với Hà Nội bởi thời tiết Sài Gòn luôn thất thường.
                Sài Gòn không có đặc sản của riêng mình vì Sài Gòn là nơi dung nạp mọi nền văn hoá.
                    Muốn ăn món Thái, 
                            Có ngay! 
                    Muốn ăn món Hàn, 
                            Hãy nhìn bên kia đường! 
                    Muốn ăn thịt nướng, 
                            Đi thêm vài bước nữa! 
                    Muốn ăn món Nhật, 
                            Ghé đối diện! 
                Sài Gòn tuy có vẻ đơn điệu về ẩm thực nhưng chính Sài Gòn cũng có một phong cách rất riêng mà chỉ có ở Sài Gòn
                    Những buổi tối không ngủ 
                        Ngắm nhìn đường phố nhộp nhịp
                            Bên cạnh những người mình yêu thương cùng ly cà phê hương vị đậm đà. 
                Sài Gòn là nơi của những ly cà phê đặc biệt. 
                Hiếm có nơi mà người ta có thể thưởng thức được ly cà phê hấp dẫn bằng nhiều hình thức khác nhau. 
                Có một Sài Gòn rất khác... 
            
            Chúng ta sẽ khám phá Sài Gòn bằng mọi cung bậc mà bạn có thể cảm nhận được. Thấm nhuần những giá trị tinh thần khác biệt. Đó mới là Sài Gòn. Một Sài Gòn diễm tình hoa lệ.
        </pre>
        
        <h1>Khám phá Sài Gòn ngay nào</h1>
        <center><a href="thuc-don.html"><button class="button1">Khám phá ngay</button></a></center>
        <div>
        <h2>Giới thiệu dự án</h2>
        <p>Dự án được thự chiện bởi một nhóm bạn trẻ có niềm đam mê với ẩm thực nơi họ sinh ra. Chúng tôi luôn phát triển dự án theo đúng tôn chỉ "Ngon-bổ-rẻ". Chúng tôi luôn muốn mang đến cho bạn những trải nghiệm ẩm thực chỉ có ở Sài Gòn không nơi đâu có được. </p>
        <h2>Mục tiêu dự án</h2>
        <p>Chúng tôi muốn hoàn thành trọn vẹn bộ bản đồ ẩm thực Sài Gòn theo từng quận huyện khác nhau. Hiện chúng tôi đã có bản đồ của hai huyện ngoại thành thành phố.</p>
        <h2>Điểm nhấn dự án</h2>
        <p>Món ăn đường phố thường bị gắn mác là kém vệ sinh. Nhưng chúng tôi muốn mang đến một trải nghiệm khác biệt hơn dành cho bạn. Một trải nghiệm thức ăn đường phố rẻ nhưng hợp vệ sinh.</p>
        </div>
        <button>Theo dõi thông tin của chúng tôi</button>
</body>

</html>

 Kết quả ví dụ

Ngoài ra bạn còn có thể tạo ra những dòng chữ hiện lên trên trang web bằng thuộc tính OnClick.

Cú pháp:

<button onlick= “alert(‘…’)”>Content</button>

Chúng ta sẽ sử dụng thuộc tính OnClick đi kèm với giá trị alert để thông báo cho người dùng một thông điệp nào đó.

Ví dụ

 

<!doctype html>
<html>

<head>
    <title>Trang web giới thiệu ẩm thực sáng tạo</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay" />
    <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn" />
    <link href="css/style.css" rel="stylesheet" type="text/css"/>

</head>

<body>
    <nav>
        <a href="try.html" class="main-menu">Trang chủ</a> |
        <a href="thuc-don.html" class="main-menu">Thực Đơn</a> |
        <a href="lien-he.html" class="main-menu">Liên Hệ</a>
    </nav>
    

    <h1>Ẩm thực 47 ngõ đường phố Sài Gòn</h1>
    <nav id="gola">
        <a href="#" class="main-top">Giới thiệu dự án</a> |
        <a href="#" class="main-top">Mục tiêu dự án</a> |
        <a href="#" class="main-top">Điểm nhấn dự án</a>
    </nav>
   
    
    <pre>
            Sài Gòn không giống với Hà Nội bởi thời tiết Sài Gòn luôn thất thường.
                Sài Gòn không có đặc sản của riêng mình vì Sài Gòn là nơi dung nạp mọi nền văn hoá.
                    Muốn ăn món Thái, 
                            Có ngay! 
                    Muốn ăn món Hàn, 
                            Hãy nhìn bên kia đường! 
                    Muốn ăn thịt nướng, 
                            Đi thêm vài bước nữa! 
                    Muốn ăn món Nhật, 
                            Ghé đối diện! 
                Sài Gòn tuy có vẻ đơn điệu về ẩm thực nhưng chính Sài Gòn cũng có một phong cách rất riêng mà chỉ có ở Sài Gòn
                    Những buổi tối không ngủ 
                        Ngắm nhìn đường phố nhộp nhịp
                            Bên cạnh những người mình yêu thương cùng ly cà phê hương vị đậm đà. 
                Sài Gòn là nơi của những ly cà phê đặc biệt. 
                Hiếm có nơi mà người ta có thể thưởng thức được ly cà phê hấp dẫn bằng nhiều hình thức khác nhau. 
                Có một Sài Gòn rất khác... 
            
            Chúng ta sẽ khám phá Sài Gòn bằng mọi cung bậc mà bạn có thể cảm nhận được. Thấm nhuần những giá trị tinh thần khác biệt. Đó mới là Sài Gòn. Một Sài Gòn diễm tình hoa lệ.
        </pre>
        
        <h1>Khám phá Sài Gòn ngay nào</h1>
        <center><a href="thuc-don.html"><button class="button1">Khám phá ngay</button></a></center>
        <div>
        <h2>Giới thiệu dự án</h2>
        <p>Dự án được thự chiện bởi một nhóm bạn trẻ có niềm đam mê với ẩm thực nơi họ sinh ra. Chúng tôi luôn phát triển dự án theo đúng tôn chỉ "Ngon-bổ-rẻ". Chúng tôi luôn muốn mang đến cho bạn những trải nghiệm ẩm thực chỉ có ở Sài Gòn không nơi đâu có được. </p>
        <h2>Mục tiêu dự án</h2>
        <p>Chúng tôi muốn hoàn thành trọn vẹn bộ bản đồ ẩm thực Sài Gòn theo từng quận huyện khác nhau. Hiện chúng tôi đã có bản đồ của hai huyện ngoại thành thành phố.</p>
        <h2>Điểm nhấn dự án</h2>
        <p>Món ăn đường phố thường bị gắn mác là kém vệ sinh. Nhưng chúng tôi muốn mang đến một trải nghiệm khác biệt hơn dành cho bạn. Một trải nghiệm thức ăn đường phố rẻ nhưng hợp vệ sinh.</p>
        </div>
        <button onclick="alert('Cảm ơn bạn đã theo dõi chúng tôi')">Theo dõi thông tin của chúng tôi</button>
</body>

</html>

Kết quả ví dụ

Thậm chí bạn còn có thể liên kết một đường link vào Button.

Cú pháp:

<button><a href= “…”>Content</a></button>

Bạn sẽ nhìn thấy link được liên kết có khuyết điểm là bị gạch dưới. Chúng ta sẽ dùng thẻ Style để điều chỉnh khuyết điểm này.

Ví dụ

<!doctype html>
<html>

<head>
    <title>Trang web giới thiệu ẩm thực sáng tạo</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay" />
    <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn" />
    <link href="css/style.css" rel="stylesheet" type="text/css"/>

</head>

<body>
    <nav>
        <a href="try.html" class="main-menu">Trang chủ</a> |
        <a href="thuc-don.html" class="main-menu">Thực Đơn</a> |
        <a href="lien-he.html" class="main-menu">Liên Hệ</a>
    </nav>
    

    <h1>Ẩm thực 47 ngõ đường phố Sài Gòn</h1>
    <nav id="gola">
        <a href="#" class="main-top">Giới thiệu dự án</a> |
        <a href="#" class="main-top">Mục tiêu dự án</a> |
        <a href="#" class="main-top">Điểm nhấn dự án</a>
    </nav>
   
    
    <pre>
            Sài Gòn không giống với Hà Nội bởi thời tiết Sài Gòn luôn thất thường.
                Sài Gòn không có đặc sản của riêng mình vì Sài Gòn là nơi dung nạp mọi nền văn hoá.
                    Muốn ăn món Thái, 
                            Có ngay! 
                    Muốn ăn món Hàn, 
                            Hãy nhìn bên kia đường! 
                    Muốn ăn thịt nướng, 
                            Đi thêm vài bước nữa! 
                    Muốn ăn món Nhật, 
                            Ghé đối diện! 
                Sài Gòn tuy có vẻ đơn điệu về ẩm thực nhưng chính Sài Gòn cũng có một phong cách rất riêng mà chỉ có ở Sài Gòn
                    Những buổi tối không ngủ 
                        Ngắm nhìn đường phố nhộp nhịp
                            Bên cạnh những người mình yêu thương cùng ly cà phê hương vị đậm đà. 
                Sài Gòn là nơi của những ly cà phê đặc biệt. 
                Hiếm có nơi mà người ta có thể thưởng thức được ly cà phê hấp dẫn bằng nhiều hình thức khác nhau. 
                Có một Sài Gòn rất khác... 
            
            Chúng ta sẽ khám phá Sài Gòn bằng mọi cung bậc mà bạn có thể cảm nhận được. Thấm nhuần những giá trị tinh thần khác biệt. Đó mới là Sài Gòn. Một Sài Gòn diễm tình hoa lệ.
        </pre>
        
        <h1>Khám phá Sài Gòn ngay nào</h1>
        <center><a href="thuc-don.html"><button class="button1">Khám phá ngay</button></a></center>
        <div>
        <h2>Giới thiệu dự án</h2>
        <p>Dự án được thự chiện bởi một nhóm bạn trẻ có niềm đam mê với ẩm thực nơi họ sinh ra. Chúng tôi luôn phát triển dự án theo đúng tôn chỉ "Ngon-bổ-rẻ". Chúng tôi luôn muốn mang đến cho bạn những trải nghiệm ẩm thực chỉ có ở Sài Gòn không nơi đâu có được. </p>
        <h2>Mục tiêu dự án</h2>
        <p>Chúng tôi muốn hoàn thành trọn vẹn bộ bản đồ ẩm thực Sài Gòn theo từng quận huyện khác nhau. Hiện chúng tôi đã có bản đồ của hai huyện ngoại thành thành phố.</p>
        <h2>Điểm nhấn dự án</h2>
        <p>Món ăn đường phố thường bị gắn mác là kém vệ sinh. Nhưng chúng tôi muốn mang đến một trải nghiệm khác biệt hơn dành cho bạn. Một trải nghiệm thức ăn đường phố rẻ nhưng hợp vệ sinh.</p>
        </div>
        <a href="form.html"><button>Theo dõi thông tin của chúng tôi</button></a>
</body>

</html>

Kết quả ví dụ

 

Bạn đã học được khá nhiều điều về thẻ Button. Thẻ Button khá thú vị và ứng dụng rất nhiều trong quá trình thực hiện cho trang web. Bạn thấy thẻ Button tạo được nút nhấn tuy hơi original. Bạn chưa trang trí nên hiển nhiên là nhìn thấy hơi xấu một chút. Sau khi bạn trang trí xong thì nút bấm sẽ rất ấn tượng đấy. Hãy luyện tập thật nhiều nhé! Bài tập về phần này khá đơn giản. Chúc bạn học vui!

Bài tập

 

 




Đặt câu hỏi cho bài viết này ?