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
}
*{
margin: 0 auto;
}
#button {
background-color: pink;
margin-top:30px;
height: 40px;
width: 130px;
border-radius:50%;/*for making corners of div in round shape*/
border:groove;
}
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;
}
Bước 3
Cho thuộc tính div (button) di chuột với CSS.
CSS
#button:hover {
background-color: red;
box-shadow:pink 5px 5px;
border:none;
}
