Cấp bậc tác giả:

HTML

Tạo button sử dụng HTML5 và CSS3

Được viết bởi QuangIT ngày 20/01/2013 lúc 04:07 AM
Trong bài viết này, tôi sẽ mô tả làm thế nào để tạo ra một nút bằng cách sử dụng HTML5 và CSS3. Tôi sẽ tạo ra nút này không sử dụng Photoshop hoặc bất kỳ hình ảnh nào và tôi sẽ không sử dụng phần tử button của HTML.
  • 0
  • 1683

Tạo button sử dụng HTML5 và CSS3


Giới thiệu 
Trong bài viết này, tôi sẽ mô tả làm thế nào để tạo ra một nút bằng cách sử dụng HTML5 và CSS3. Tôi sẽ tạo ra nút này không sử dụng Photoshop hoặc bất kỳ hình ảnh nào và tôi sẽ không sử dụng phần tử button của HTML. 

Bước 1 

Thiết kế một div với sự giúp đỡ của HTML và cung cấp cho nó các thuộc tính với CSS. 

HTML 

<html>
<
head>
    
<title>Creating-Button</title>
    
<link href="../CSS/StyleSheet1.css" rel="stylesheet" type="text/css" />
</
head>
<
body>
    
<div id="button">
    
</div>
</
body>
</
html>

CSS


body
 {background-color:green
}

*
{
   
margin0 auto;
}

#button
 {
    
background-colorpink;
    
margin-top:30px;
    
height40px;

    width130px;
    
border-radius:50%;/*for making corners of div in round shape*/
    
border:groove;
}


button-for-Creating-button-using-HTML5-and-CSS3.png

Bước 2 

Tạo một thẻ ANCHOR trong div (button) và cung cấp cho nó các thuộc tính với CSS. 

HTML

<div id="button">
       
<a>Home</a>
    
</div>

CSS

a
 {
    
margin-left:40px;
    
margin-top:20px;
    
font-weight:bold;
    
font-size:large;   
}

anchor-tag-for-Creating-button-using-HTML5-and-CSS3.jpg

Bước 3 

Cho thuộc tính div (button) di chuột với CSS. 

CSS

#button:hover {
    
background-colorred;
    
box-shadow:pink 5px 5px;
    
border:none;
}

on-hover-for-Creating-button-using-HTML5-and-CSS3.png

Nguồn bài viết: Dngaz.com

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML