Hướng dẫn how do you make a play pause button in css? - làm thế nào để bạn tạo một nút tạm dừng phát trong css?

DigitalOcean cung cấp các sản phẩm đám mây cho mọi giai đoạn của hành trình của bạn. Bắt đầu với $ 200 trong tín dụng miễn phí!

Trên toàn cầu, các biểu tượng điều khiển phương tiện là một số ngôn ngữ hình ảnh được hiểu phổ biến nhất trong bất kỳ loại giao diện nào. Một nhà thiết kế có thể chỉ cần cho rằng mọi người dùng không chỉ biết ▶ = chơi, mà người dùng sẽ tìm kiếm biểu tượng để xem bất kỳ video hoặc hoạt hình nào.

Được giới thiệu vào những năm 1960 bởi kỹ sư người Thụy Điển Philip Olsson Mũi tên chơi lần đầu tiên được thiết kế để chỉ ra hướng mà băng sẽ đi khi đọc trên các máy nghe nhạc quay từ reel. Kể từ đó, chúng tôi đã chuyển từ băng cassette sang CD, từ iPod sang Spotify, nhưng các biểu tượng điều khiển phương tiện vẫn giữ nguyên.

Biểu tượng ▶ ▶ ️ ️ là biểu tượng tiêu chuẩn (với unicode của riêng nó) để bắt đầu một phương tiện âm thanh/video cùng với phần còn lại của các biểu tượng như Stop, Pause, Fast Porward, Rewind và các phương tiện khác.

Có các tùy chọn Unicode và biểu tượng cảm xúc cho các biểu tượng nút phát, nhưng nếu bạn muốn một cái gì đó tùy chỉnh, bạn có thể với lấy một phông chữ biểu tượng hoặc tài sản tùy chỉnh. Nhưng nếu bạn muốn thay đổi giữa các biểu tượng thì sao? Điều đó có thể thay đổi được suôn sẻ không? Một giải pháp có thể là sử dụng SVG. Nhưng điều gì sẽ xảy ra nếu nó có thể được thực hiện trong 10 dòng CSS? Thật là gọn gàng như thế nào‽But what if it could be done in 10 lines of CSS? How neat is that‽

Trong bài viết này, chúng tôi sẽ xây dựng cả nút phát và nút tạm dừng với CSS và sau đó khám phá cách chúng tôi có thể sử dụng các chuyển tiếp CSS để sinh động giữa chúng.

Nút chơi

Bước một

Chúng tôi muốn đạt được một tam giác chỉ đúng. Hãy bắt đầu bằng cách làm một hộp có đường viền dày. Hiện tại, các hộp là phương pháp cơ sở ưa thích để thực hiện hình tam giác. Chúng tôi sẽ bắt đầu với một đường viền dày và màu sắc tươi sáng để giúp chúng tôi thấy những thay đổi của mình.

.button.play {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

Step Hai

Step two

Kết xuất một đường viền màu rắn mang lại kết quả trên. Ẩn đằng sau màu của biên giới là một mẹo nhỏ gọn gàng. Làm thế nào là biên giới được hiển thị chính xác? Hãy để thay đổi màu sắc đường viền, một cho mỗi bên, sẽ giúp chúng tôi thấy đường viền được hiển thị như thế nào.

.button.play {
  ...
  border-width: 37px 37px 37px 37px;
  border-color: red blue green yellow;
}

Step ba

Step three

Tại giao điểm của mỗi biên giới, bạn sẽ nhận thấy rằng một góc độ 45 độ. Đây là một cách thú vị mà biên giới được thể hiện bởi một trình duyệt và do đó, mở ra khả năng của các hình dạng khác nhau, như hình tam giác. Như chúng ta sẽ thấy dưới đây, nếu chúng ta làm cho

.button.play {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

3 đủ rộng, có vẻ như chúng ta có thể đạt được một tam giác!

.button.play {
  ...
  border-width: 37px 0px 37px 74px;
  border-color: red blue green yellow;
}

Step bốn

Step four

Chà, điều đó đã làm việc như mong đợi. Như thể hộp bên trong (Div thực tế) nhấn mạnh vào việc giữ chiều rộng của nó. Lý do phải làm với thuộc tính

.button.play {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

4, mặc định là giá trị

.button.play {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

5. Giá trị

.button.play {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

5 bảo div đặt bất kỳ đường viền nào ở bên ngoài, tăng chiều rộng hoặc chiều cao.

Nếu chúng ta thay đổi giá trị này thành

.button.play {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

7, đường viền sẽ được thêm vào bên trong hộp.

.button.play {
  ...
  box-sizing: border-box;
  width: 74px;
  height: 74px;
  border-width: 37px 0px 37px 74px;
}

Bước

Final step

Bây giờ chúng ta có một tam giác thích hợp. Tiếp theo, chúng ta cần loại bỏ phần trên và dưới (đỏ và xanh lá cây). Chúng tôi làm điều này bằng cách đặt

.button.play {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

8 của các bên đó thành

.button.play {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

9. Chiều rộng cũng cho phép chúng ta kiểm soát hình dạng và kích thước của tam giác.

________ 5here Một hình ảnh động để giải thích rằng, nếu điều đó hữu ích.

Here’s an animation to explain that, if that’s helpful.

Nút tạm dừng

Bước một

Chúng tôi muốn đạt được một tam giác chỉ đúng. Hãy bắt đầu bằng cách làm một hộp có đường viền dày. Hiện tại, các hộp là phương pháp cơ sở ưa thích để thực hiện hình tam giác. Chúng tôi sẽ bắt đầu với một đường viền dày và màu sắc tươi sáng để giúp chúng tôi thấy những thay đổi của mình.

.button.play {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

Step Hai

Step two

Kết xuất một đường viền màu rắn mang lại kết quả trên. Ẩn đằng sau màu của biên giới là một mẹo nhỏ gọn gàng. Làm thế nào là biên giới được hiển thị chính xác? Hãy để thay đổi màu sắc đường viền, một cho mỗi bên, sẽ giúp chúng tôi thấy đường viền được hiển thị như thế nào.

.button.play {
  ...
  border-width: 37px 37px 37px 37px;
  border-color: red blue green yellow;
}

Step ba

Final step

Tại giao điểm của mỗi biên giới, bạn sẽ nhận thấy rằng một góc độ 45 độ. Đây là một cách thú vị mà biên giới được thể hiện bởi một trình duyệt và do đó, mở ra khả năng của các hình dạng khác nhau, như hình tam giác. Như chúng ta sẽ thấy dưới đây, nếu chúng ta làm cho

.button.play {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

3 đủ rộng, có vẻ như chúng ta có thể đạt được một tam giác!

.button.play {
  ...
  border-width: 37px 0px 37px 74px;
  border-color: red blue green yellow;
}

Step bốn

Animating the Transition

Chà, điều đó đã làm việc như mong đợi. Như thể hộp bên trong (Div thực tế) nhấn mạnh vào việc giữ chiều rộng của nó. Lý do phải làm với thuộc tính

.button.play {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

4, mặc định là giá trị

.button.play {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

5. Giá trị

.button.play {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

5 bảo div đặt bất kỳ đường viền nào ở bên ngoài, tăng chiều rộng hoặc chiều cao.

Việc chuyển đổi lớp

.button.play {
  ...
  border-width: 37px 37px 37px 37px;
  border-color: red blue green yellow;
}

7 bây giờ sẽ hoạt hình giữa trạng thái chơi và trạng thái tạm dừng.

Ở đây, phong cách cuối cùng trong SCSS:

.button.play {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

0

Thử nghiệm

Xem nút BEN Chuyển tiếp với Biên giới của Chris Coyier (@Chriscoyier) trên Codepen.

Chuyển đổi mà không cần JavaScript

Với nút chơi/tạm dừng trong thế giới thực, nó gần như chắc chắn bạn sẽ sử dụng JavaScript để chuyển đổi trạng thái của nút. Nhưng thật thú vị khi biết có một cách CSS để làm điều đó, sử dụng đầu vào và nhãn: Hack hộp kiểm.

.button.play {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

1

.button.play {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

2

Thử nghiệm

Xem nút BEN Chuyển tiếp với Biên giới của Chris Coyier (@Chriscoyier) trên Codepen.

Chuyển đổi mà không cần JavaScript

Làm cách nào để tạo nút phát trong CSS?

Làm cách nào để tạo nút phát tạm dừng trong HTML?

Làm cách nào để thêm nút phát vào video trong CSS?

Làm thế nào để bạn chơi PAUSE Animation?