Cách tạo kiểu cho các nút bằng CSS – css nội tuyến cho nút

Các nút đẹp và hấp dẫn có thể lấp đầy giao diện tổng thể của trang web của bạn. Tìm hiểu cách tạo và tạo kiểu cho các nút với sự trợ giúp của CSS. Ngoài ra, hãy xem rất nhiều ví dụ!

Bạn đang xem : css nội tuyến cho nút

Các nút được tạo kiểu giúp bạn tạo các trang web thú vị. Có rất nhiều phong cách mà bạn có thể áp dụng cho các nút. Đây là hướng dẫn tạo kiểu cho các nút.

1. Tạo nút

Đầu tiên, hãy tạo phần tử & lt; button & gt; .

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

Nút

& lt;

type

=

" button "

& gt;

Gửi

& lt; /

button

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

2. Tạo kiểu cho nút của bạn

Vì vậy, đã đến lúc áp dụng các kiểu cho nút của bạn.

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

Nút

{

display

: inline-block;

background-color

:

# 7b38d8

;

border-radius

:

10px

;

border

:

4px

double

# cccccc

;

color

:

# eeeeee

;

text-align

: center;

font-size

:

28px

;

padding

:

20px

;

width

:

200px

; -webkit-

chuyển đổi

: all

0.5 giây

; -moz-

chuyển tiếp

: all

0,5 giây

; -o-

chuyển tiếp

: all

0,5 giây

;

chuyển tiếp

: all

0,5 giây

;

con trỏ

: con trỏ;

margin

:

5px

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

Nút

& lt;

type

=

" button "

& gt;

Gửi

& lt; /

button

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

3. Tạo kiểu cho trạng thái di chuột

Bước thứ ba của bạn là tạo kiểu cho trạng thái di chuột để cung cấp phản hồi trực quan cho người dùng khi trạng thái của nút thay đổi.

Nút

  

: di chuột

{

background-color

: xanh lục; }

Bây giờ chúng ta hãy xem một ví dụ thú vị bằng cách sử dụng nút & lt; & gt; phần tử.

Ví dụ về tạo kiểu cho một nút được tạo bằng & lt ; nút & gt; thẻ:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

Nút

{

display

: inline-block;

background-color

:

# 7b38d8

;

border-radius

:

10px

;

border

:

4px

double

# cccccc

;

color

:

# eeeeee

;

text-align

: center;

font-size

:

28px

;

padding

:

20px

;

width

:

200px

;

chuyển tiếp

: all

0,5 giây

;

con trỏ

: con trỏ;

margin

:

5px

; } Nút

span

{

con trỏ

: con trỏ;

display

: inline-block;

vị trí

: tương đối;

chuyển tiếp

:

0,5 giây

; } Nút

span

: sau { nội dung:

'\ 00bb'

;

vị trí

: tuyệt đối;

độ mờ

:

0

;

top

:

0

;

right

: -

20px

;

chuyển tiếp

:

0,5 giây

; } Nút

: hover

{

background-color

:

# f7c2f9

; } Nút

: hover

span {

padding-right

:

25px

; } Nút

: hover

span : sau { độ mờ:

1

;

right

:

0

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Các nút kiểu

& lt; /

h2

& gt;

Nút

& lt;

& gt;

& lt;

span

& gt;

Gửi

& lt; /

span

& gt;

Nút

& lt; /

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Kết quả

Ví dụ về tạo kiểu cho một nút được tạo bằng & lt ; span & gt; thẻ:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

body

{

background

:

# 560059

;

color

:

# eeeeee

;

font-family

: Arial;

font-size

:

16px

; }

. wrapper

{

margin

:

80px

auto;

text-align

: trung tâm;

width

:

100%

;

vị trí

: tương đối; } Nút

.

{

padding

:

15px

100px

;

margin

:

10px

4px

;

color

:

# eee

;

font-family

: sans-serif;

text-biến đổi

: chữ hoa;

text-align

: center;

vị trí

: tương đối;

text-decoration

: không có;

display

: inline-block;

border

:

1px

solid; } Nút

.

:: before

{

nội dung

:

""

;

vị trí

: tuyệt đối;

top

:

0

;

còn lại

:

0

;

display

: block;

width

:

100%

;

height

:

100%

;

z-index

: -

1

; -webkit-

biến đổi

:

scaleY

(.

1 );

biến đổi

:

scaleY

(.

1

);

chuyển tiếp

: tất cả.

4 giây

} Nút

.

: hover

{

color

:

# b414ba

; }

. nút

: hover

:: trước

{

độ mờ

:

1

;

background-color

:

# f7c2f9

; -webkit-

biến đổi

:

scaleY

(

1

);

biến đổi

:

scaleY

(

1

);

chuyển đổi

: -webkit-biến đổi.

6 giây

khối-bezier < /p>(.

08

,.

35

,.

13

,

1,02

), độ mờ.

4 giây

;

chuyển đổi

: chuyển đổi.

6 giây

khối-bezier

(.

08

,.

35

,.

13 ,

1,02

), độ mờ }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" wrapper "

& gt;

& lt;

span

class

=

" button "

& gt;

Nút 1

& lt; /

span

& gt;

& lt;

span

class

=

" button "

& gt;

Nút 2

& lt; /

span

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ về tạo kiểu cho một nút được tạo bằng & lt ; a & gt; thẻ:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

body

{

background

:

# 3b0044

;

color

:

# 6098FF

;

font-family

: sans-serif;

font-size

:

16px

; }

. wrapper

{

margin

:

80px

auto;

text-align

: center;

width

:

100%

;

vị trí

: tương đối; } Nút

.

{

padding

:

15px

100px

;

margin

:

10px

4px

;

color

:

# ffffff

;

font-family

: sans-serif;

text-biến đổi

: chữ hoa;

text-align

: center;

vị trí

: tương đối;

text-decoration

: không có;

display

: inline-block; } Nút

.

{

border

:

1px

solid trong suốt; -webkit-

chuyển đổi

: all

0.4 giây

Cub-bezier < /p>(.

5

,.

24

,

0 < / p>,

1

);

chuyển tiếp

: tất cả

0,4 ​​giây

khối-bezier

(.

5

,.

24

,

0

,

1

); } Nút

.

:: before

{

nội dung

:

''

;

vị trí

: tuyệt đối;

left

:

0px

;

bottom

:

0px

;

z-index

: -

1

;

width

:

0%

;

height

:

1px

;

background

:

# 003177

;

box-shadow

: inset

0px

0px

< p class = "hljs-number"> 0px

# b6cdef

;

display

: block; -webkit-

chuyển đổi

: all

0.4 giây

Cub-bezier < /p>(.

5

,.

24

,

0 < / p>,

1

);

chuyển tiếp

: tất cả

0,4 ​​giây

khối-bezier

(.

5

,.

24

,

0

,

1

) }

. nút

: hover

:: trước

{

width

:

100%

; } Nút

.

:: after

{

nội dung

:

''

;

vị trí

: tuyệt đối;

right

:

0px

;

top

:

0px

;

z-index

: -

1

;

width

:

0%

;

height

:

1px

;

background

:

# a9c1e8

; -webkit-

chuyển đổi

: all

0.4 giây

Cub-bezier < /p>(.

7

,.

25

,

0 < / p>,

1

);

chuyển tiếp

: tất cả

0,4 ​​giây

khối-bezier

(.

7

,.

25

,

0

,

1

) }

. nút

: hover

:: sau

{

width

:

100%

; } Nút

.

: hover

{

border-left

:

1px

solid

# b6cdef

;

border-right

:

1px

solid

# 6098FF

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" wrapper "

& gt;

& lt;

a

href

=

" # "

class

=

" button "

& gt;

Nút 1

& lt; /

a

& gt;

& lt;

a

href

=

" # "

class

=

" button "

& gt;

Nút 2

& lt; /

a

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ về tạo kiểu cho nút & lt; & gt; phần tử:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

. container

{

vị trí

: tuyệt đối;

top

:

10%

; } Nút

.

{

border

: none;

display

: block;

text-align

: center;

con trỏ

: con trỏ;

text-biến đổi

: chữ hoa;

outline

: none;

tràn

: hidden;

vị trí

: tương đối;

color

:

# eeeeee

;

font-weight

:

600

;

font-size

:

15px

;

background-color

:

# 153f00

;

padding

:

15px

50px

;

margin

:

0

auto; }

. button

span

{

vị trí

: tương đối;

z-index

:

1

; } Nút

.

: sau { nội dung:

""

;

vị trí

: tuyệt đối;

còn lại

:

0

;

top

:

0

;

height

:

470%

;

width

:

140%

;

background

:

# 52b71f

; -webkit-

chuyển tiếp

: tất cả.

5 giây

dễ dàng-in-out;

chuyển tiếp

: tất cả.

5s

easy-in-out; -webkit-

biến đổi

:

translateX

(-

100% )

translateY

(-

25%

)

xoay (

45deg

);

biến đổi

:

translateX

(-

100%

)

translateY

(-

25%

)

xoay

(

45deg

); }

. button

: hover

: after { -webkit-biến đổi:

translateX

(-

9%

)

translateY

(-

25%

)

xoay

(

45deg

);

biến đổi

:

translateX

(-

9%

)

translateY

(-

25%

)

xoay

(

45deg

); }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Nút tạo kiểu

& lt; /

h2

& gt;

& lt;

div

class

=

" container "

& gt;

Nút

& lt;

type

=

" button "

class

=

" button "

& gt;

& lt;

span

& gt;

Di chuột!

& lt; /

span

& gt;

Nút

& lt; /

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ về tạo kiểu cho một số & lt; nút & gt; các phần tử:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

body

{

font-size

:

60%

;

background

:

# 00abb7

; }

. container

{

padding

:

50px

; } Nút

, Nút

:: after

{ -webkit-

chuyển tiếp

: all

0,3 giây

; -moz-

chuyển đổi

: all

0,3 giây

; -o-

chuyển tiếp

: all

0,3 giây

;

chuyển tiếp

: all

0,3 giây

; } Nút

{

background

: không có;

border

:

4px

solid

# fff

;

border-radius

:

10px

;

color

:

# fff

;

display

: block;

font-size

:

1.6em

;

font-weight

: bold;

margin

:

10px

auto;

padding

:

2em

6em

;

vị trí

: tương đối;

text-biến đổi

: chữ hoa; } Nút

:: before

, Nút

:: after

{

background

:

# fff

;

nội dung

:

''

;

vị trí

: tuyệt đối;

z-index

: -

1

; } Nút

: hover

{

color

:

# 29f2e4

; }

. button1

:: after

{

height

:

0

;

còn lại

:

0

;

top

:

0

;

width

:

100%

; }

. button1

: hover

: sau { chiều cao:

100%

; }

. button2

:: after

{

height

:

100%

;

còn lại

:

0

;

top

:

0

;

width

:

0

; }

. button2

: hover

: sau { width:

100%

; }

. button3

:: after

{

height

:

0

;

còn lại

:

50%

;

top

:

50%

;

width

:

0

; }

. button3

: hover

: sau { chiều cao:

100%

;

còn lại

:

0

;

top

:

0

;

width

:

100%

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" container "

& gt;

Nút

& lt;

type

=

" button "

class

=

" button1 "

& gt;

Nút 1

& lt; /

nút

& gt;

Nút

& lt;

type

=

" button "

class

=

" button2 "

& gt;

Nút 2

& lt; /

nút

& gt;

Nút

& lt;

type

=

" button "

class

=

" button3 "

& gt;

Nút 3

& lt; /

nút

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ về tạo kiểu cho một nút được tạo bằng & lt ; đầu vào & gt; thẻ:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

đầu vào

{

padding

:

15px

100px

;

margin

:

10px

4px

;

con trỏ

: con trỏ;

text-biến đổi

: chữ hoa;

text-align

: center;

vị trí

: tương đối; }

input

: hover

{

độ mờ

:

0,5

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

đầu vào

type

=

"button"

value

= < p class = "hljs-string"> "Nút"

/ & gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »


Xem thêm những thông tin liên quan đến chủ đề css nội tuyến cho nút

Animated Hover Me button using html and scss | Amazing CSS

  • Tác giả: Amazing CSS
  • Ngày đăng: 2022-07-11
  • Đánh giá: 4 ⭐ ( 9398 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video we create custom animated hover effects button. Please subscribe Amazing CSS channel for more.

    ——- Social Media Links ——-
    instagram : https://www.instagram.com/kedariitindustries/?hl=en

    ––––––––––––––––––––––––––––––
    Track: Fade — Next Route [Audio Library Release]
    Music provided by Audio Library Plus
    Watch: https://youtu.be/UPhZ6S9Qfnc
    Free Download / Stream: https://alplus.io/fade
    ––––––––––––––––––––––––––––––

    ——- HashTags ——-
    AmazingCSS scss sass css

Giảm thiểu một yếu tố tùy chỉnh có chứa CSS và HTML nội tuyến

  • Tác giả: helpex.vn
  • Đánh giá: 3 ⭐ ( 9269 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đã tạo một thành phần web ShareButton , nó không tuyệt lắm, nhưng tôi thích nó và tôi đã học được rất nhiều về hệ sinh thái Thành phần Web trong khi tôi tạo nó. Mục tiêu chính của tôi…

Trình xem CSS dành cho Google Chrome ™

  • Tác giả: chrome.google.com
  • Đánh giá: 4 ⭐ ( 1620 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tạo nút công tắc với Checkboxes và CSS3

  • Tác giả: sharecode.vn
  • Đánh giá: 3 ⭐ ( 8750 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Từng bước tạo các nút công tắc đẹp mắt mà không cần phải dùng Photoshop để thiết kế hay bất kì phần mềm tạo ảnh nào.

CSS3 Button Generator

  • Tác giả: tools.ngoisaoso.vn
  • Đánh giá: 4 ⭐ ( 8335 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: tạo button trực tuyến, tạo button online, CSS Button Generator. Make CSS buttons using our free CSS3 button maker. Create CSS button with image and make css button clickable.

10 ví dụ mã CSS mà bạn có thể học trong 10 phút

  • Tác giả: funix.edu.vn
  • Đánh giá: 3 ⭐ ( 8416 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn cần trợ giúp với CSS? Hãy thử các ví dụ mã CSS cơ bản này để bắt đầu, sau đó áp dụng chúng cho các trang web của riêng bạn.

Liên kết css với html

  • Tác giả: viettuts.vn
  • Đánh giá: 5 ⭐ ( 1183 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS được thêm vào các trang HTML để định dạng trang web theo quy tắc CSS. Có ba cách để liên kết CSS với HTML. CSS nội tuyến, CSS nội bộ (Internal CSS), CSS

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách gửi email bằng hàm PHP Mail () và PHP Mailer - script email php đơn giản