資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學帶動畫箭頭符號的 Prime CSS 營銷按鈕
讓我們從瞭解什麼是營銷按鈕以及何時使用它們開始本教程。設想一下，你是公司的老闆，正在開發一款軟體產品，但你沒有任何使用者或客戶。這個產品有價值嗎？答案是否定的。
為了獲得客戶，你必須營銷你的產品；這完全是關於吸引你的客戶。因此，開發者可以使用帶有動畫箭頭圖示的營銷按鈕來吸引使用者並促進產品發展。
在本教程中，我們將使用 Primer CSS 框架來建立帶有動畫箭頭符號的營銷按鈕。
語法
使用者可以按照以下語法使用帶有動畫箭頭的 Primer CSS 按鈕。
<button class="btn-mktg arrow-target-mktg mr-3" type="button"> text <!-- svg arrow --> </button>
在上面的語法中，我們為按鈕添加了“btn-mktg”類，為箭頭動畫添加了“arrow-target-mktg”類。使用者可以新增一個 SVG 箭頭
示例 1
在下面的示例中，我們在`
`部分添加了 Primer CSS 的 CDN 以將其與程式碼一起使用。我們可以透過向 HTML 元素新增類名來使用 Primer CSS。在這裡，我們建立了按鈕並添加了語法中所示的類來設定按鈕樣式。此外，我們在按鈕內添加了 SVG 箭頭圖示以使其具有動畫效果。
使用者可以將滑鼠懸停在輸出中的按鈕上並檢視動畫箭頭。
<html>
<head>
<link href = "https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel = "stylesheet" />
</head>
<body>
<h2>Using the <i> primer CSS </i> to create marketing buttons with animated arrow icons.</h2><br>
<button class = "btn-mktg arrow-target-mktg btn-muted-mktg mr-3" type = "button">
Enroll now
<svg xmlns = "http://www.w3.org/2000/svg" class = "octicon arrow-symbol-mktg" width = "16" height = "16"
viewBox = "0 0 16 16" fill = "none">
<path fill = "currentColor"
d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
</path>
<path stroke = "currentColor" d = "M1.75 8H11" stroke-width = "1.5" stroke-linecap = "round"> </path>
</svg>
</button>
</body>
</html>
示例 2
在下面的示例中，我們使用 Primer CSS 將動畫箭頭圖示新增到按鈕。此外，我們建立了單選按鈕，允許使用者選擇按鈕型別。在 JavaScript 中，我們訪問單選按鈕，獲取所選值，並根據單選按鈕的值更改按鈕的類名。
使用者可以在輸出中更改單選按鈕的值，並觀察帶有動畫箭頭圖示的不同按鈕樣式。
<html>
<head>
<link href = "https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel = "stylesheet" />
</head>
<body>
<h2>Using the <i> primer CSS </i> to create marketing buttons with animated arrow icons.</h2<br>
<button class = "btn-mktg arrow-target-mktg mr-3" type = "button">
Enroll now
<svg xmlns = "http://www.w3.org/2000/svg" class = "octicon arrow-symbol-mktg" width = "16" height="16"
viewBox = "0 0 16 16" fill="none">
<path fill = "currentColor"
d = "M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
</path>
<path stroke = "currentColor" d = "M1.75 8H11" stroke-width = "1.5" stroke-linecap = "round"> </path>
</svg>
</button> <br> <br>
<!-- Creating radio buttons for normal, muted, subtal, and signup button -->
<div>
<input type = "radio" id = "normal" name = "button" value = "normal" checked>
<label for = "normal"> Normal </label> <br>
<input type = "radio" id = "muted" name = "button" value = "muted">
<label for = "muted"> Muted </label> <br>
<input type = "radio" id = "subtle" name = "button" value = "subtle">
<label for = "subtle"> Subtle </label> <br>
<input type = "radio" id = "signup" name = "button" value = "signup">
<label for = "signup"> Signup </label> <br>
</div>
<script>
// handling button type
var btn = document.querySelector(".btn-mktg");
// change the class name of the button whenevervalue of radio button changes
document.getElementsByName('button').forEach(radio => radio.addEventListener('change', function () {
// get the value of checked radio button
var radios = document.querySelector('input[name="button"]:checked').value;
if (radios == "normal") {
btn.className = "btn-mktg arrow-target-mktg mr-3";
} else if (radios == "muted") {
btn.className = "btn-mktg arrow-target-mktg btn-muted-mktg mr-3";
} else if (radios == "subtle") {
btn.className = "btn-mktg arrow-target-mktg btn-subtle-mktg mr-3";
} else if (radios == "signup") {
btn.className = "btn-mktg arrow-target-mktg btn-signup-mktg mr-3";
}
}));
</script>
</body>
</html>
使用者學習瞭如何使用 Primer CSS 建立帶有動畫箭頭的營銷按鈕。此外，開發者可以透過新增不同的類名來更改按鈕的樣式。此外，它還允許開發者更改按鈕的大小。
更新於：2023年5月5日
164 次檢視
廣告