Học Thiết Kế Website Online Miễn Phí

Tổng hợp kiến thức, tài liệu để bạn học thiết kế website online miễn phí. hướng dẫn học thiết kế website từ đơn giản đến nâng cao một cách hoàn thiện nhất

Liên Kết : Chuyển Nhà Thanh Hóa | Thiết Kế Website | Học Lái Xe OTo Tại Thanh Hóa |Chuyển Hà Hà Nội |

Tạo Menu cho website có hiệu ứng khi di chuột vào

Share Button

Tạo Menu cho website có hiệu ứng khi di chuột vào

Hướng dẫn cho các bạn cách đơn giản để tạo được thanh Menu Chuyên Nghiệp Với nhiều hiệu ứng đẹp khi di chuột vào bằng CSS


Giới Thiệu :

   Khi bạn cảm thấy website của bạn quá đơn điệu, Bạn muốn phá cách, Tạo phong cách độc lạ và chuyên nghiệp hơn.

   Khi tạo menu cho website Khách hàng di chuột vào hoặc chạm tay ( đối với điện thoại cảm ứng ) Nó sẽ tạo ra các hiệu ứng trang trí cho menu dó.

 Không phải giới thiệu nhiều. Cho bạn ví dụ cụ thể hơn :

Tạo Menu cho website có hiệu ứng khi di chuột vào

Code Tạo Menu cho website có hiệu ứng khi di chuột vào

Code CSS của chúng ta đây :

button {
 background: none;
 border: 0;
 box-sizing: border-box;
 box-shadow: inset 0 0 0 2px #f45e61;
 color: #f45e61;
 font-size: inherit;
 font-weight: 700;
 margin: 1em;
 padding: 1em 2em;
 text-align: center;
 text-transform: capitalize;
 position: relative;
 vertical-align: middle;
}


button::before, 
 
button::after {
 box-sizing: border-box;
 content: '';
 position: absolute;
 width: 100%;
 height: 100%;
}

.draw {
 -webkit-transition: color 0.25s;
 transition: color 0.25s;
}
.draw::before, .draw::after {
 border: 2px solid transparent;
 width: 0;
 height: 0;
}
.draw::before {
 top: 0;
 left: 0;
}
.draw::after {
 bottom: 0;
 right: 0;
}
.draw:hover {
 color: #60daaa;
}
.draw:hover::before, .draw:hover::after {
 width: 100%;
 height: 100%;
}
.draw:hover::before {
 border-top-color: #60daaa;
 border-right-color: #60daaa;
 -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
 transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
 border-bottom-color: #60daaa;
 border-left-color: #60daaa;
 -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
 transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

.meet:hover {
 color: #fbca67;
}
.meet::after {
 top: 0;
 left: 0;
}
.meet:hover::before {
 border-top-color: #fbca67;
 border-right-color: #fbca67;
}
.meet:hover::after {
 border-bottom-color: #fbca67;
 border-left-color: #fbca67;
 -webkit-transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
 transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
}

.center:hover {
 color: #6477b9;
}
.center::before, .center::after {
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 -webkit-transform-origin: center;
 -ms-transform-origin: center;
 transform-origin: center;
}
.center::before {
 border-top: 2px solid #6477b9;
 border-bottom: 2px solid #6477b9;
 -webkit-transform: scale3d(0, 1, 1);
 transform: scale3d(0, 1, 1);
}
.center::after {
 border-left: 2px solid #6477b9;
 border-right: 2px solid #6477b9;
 -webkit-transform: scale3d(1, 0, 1);
 transform: scale3d(1, 0, 1);
}
.center:hover::before, .center:hover::after {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
 -webkit-transition: -webkit-transform 0.5s;
 transition: transform 0.5s;
}

.spin {
 width: 6em;
 height: 6em;
 padding: 0;
}
.spin:hover {
 color: #0eb7da;
}
.spin::before, .spin::after {
 top: 0;
 left: 0;
}
.spin::before {
 border: 2px solid transparent;
}
.spin:hover::before {
 border-top-color: #0eb7da;
 border-right-color: #0eb7da;
 border-bottom-color: #0eb7da;
 -webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
 transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.spin::after {
 border: 0 solid transparent;
}
.spin:hover::after {
 border-top: 2px solid #0eb7da;
 border-left-width: 2px;
 border-right-width: 2px;
 -webkit-transform: rotate(270deg);
 -ms-transform: rotate(270deg);
 transform: rotate(270deg);
 -webkit-transition: -webkit-transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
 transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
}

.circle {
 border-radius: 100%;
 box-shadow: none;
}
.circle::before, .circle::after {
 border-radius: 100%;
}

.thick {
 color: #f45e61;
}
.thick:hover {
 color: #fff;
 font-weight: 700;
}
.thick::before {
 border: 3em solid transparent;
 z-index: -1;
}
.thick::after {
 mix-blend-mode: color-dodge;
 z-index: -1;
}
.thick:hover::before {
 background: #f45e61;
 border-top-color: #f45e61;
 border-right-color: #f45e61;
 border-bottom-color: #f45e61;
 -webkit-transition: background 0s linear 0.4s, border-top-color 0.15s linear, border-right-color 0.15s linear 0.15s, border-bottom-color 0.15s linear 0.25s;
 transition: background 0s linear 0.4s, border-top-color 0.15s linear, border-right-color 0.15s linear 0.15s, border-bottom-color 0.15s linear 0.25s;
}
.thick:hover::after {
 border-top: 3em solid #f45e61;
 border-left-width: 3em;
 border-right-width: 3em;
}

Code HTML để hiện thị nội dung của bạn :

<button class="draw">Nội Dung kiểu 1</button>
<button class="draw meet">Nội Dung kiểu 2</button>
<button class="center">Nội Dung kiểu 3</button>
<button class="spin">Nội Dung kiểu 4</button>
<button class="spin circle">Nội Dung kiểu 5</button>

Bạn có thể thay nội dung màu đỏ để phù hợp với website, blog của bạn.

Hướng dẫn sử dụng code :

   Đầu tiên bạn copy code Css và dán vào Css của website bạn.

Đối với website : Bạn dán code css vào tập tin *****.css mà bạn đang sử dụng. (**** ở đây là tên css của website bạn nhé, Bạn vào quản lý tập tin và tìm tập tin có đuôi .css vá dán code này xuống dưới cùng.

Đối với blogger : Chủ Đề >>> Tùy Chỉnh >>> Nâng Cao >> Css >> dán code css vào.

Đối với wordpress : Giao diện >>> Sữa >>> Tìm Tập Tin Style.css và dán vào.

Thế là xong phần Css. Tiếp đến và bạn dán code HTML vào trang website hoặc blog của bạn ở vị trí mà bạn muốn nó xuất hiện.

Bạn có thể Chọn Một hoặc nhiều nội dung kết hợp với nhau. Có thể thêm css khác để đẹp hơn.

Tôi ví dụ như tôi chọn một thanh menu dùng nội dung kiểu 5 :

<button class="spin circle">menu 1</button><button class="spin circle">menu 2</button><button class="spin circle">menu 3</button><button class="spin circle">menu 4</button>

 

Chúc bạn thành công nhé.

Share Button

Trả lời

Email của bạn sẽ không được hiển thị công khai.

Học Thiết Kế Website Online Miễn Phí © 2017 Frontier Theme