您的位置: 首页  >  文章  >  使用CSS和jQuery的简单“号召性用语”按钮

使用CSS和jQuery的简单“号召性用语”按钮

分类: 文章 • 2023-12-12 15:02:28

网页设计中的号召性用语是一个网页元素，用于征求用户的操作（单击，悬停等）。 今天，我们将使用一些CSS和jQuery创建一个有效且出色的号召性用语按钮，以吸引用户的注意力并诱使他单击。

在本教程中，我们将详细说明所用代码的每一行，并希望对您有用。 以下教程使用HTML，CSS和jQuery ，难度级别为“ 初学者” ，预计完成时间为45分钟 。

下载教程（.zip） 或 演示

第一部分–创建按钮图像

在第一部分中，我们将向您展示如何通过简单的简单步骤使用Photoshop创建所需的图像。 开始吧。

创建一个新的Photoshop文档 ，其宽度为580px，高度为130px。 转到“ 视图” >“ 新建向导”，然后将“ 方向”设置为“ 水平”，并将“ 位置”设置为65px。

使用CSS和jQuery的简单“号召性用语”按钮

创建更多指南 ; 分别用于顶部，底部，左侧和右侧。 完成后，您的图像应具有以下指南：

使用CSS和jQuery的简单“号召性用语”按钮

指南似乎将您的画布分为上下两半。 选择“ 圆角矩形工具” ，将“ 半径”设置为5px并在画布的上半部绘制一个矩形。

使用CSS和jQuery的简单“号召性用语”按钮

更改渐变叠加和笔触的样式。

使用CSS和jQuery的简单“号召性用语”按钮

使用CSS和jQuery的简单“号召性用语”按钮

选择文字工具，输入“ 下载 ”的为样本文字到您所创建的框。 将文本对齐到框的中间，您的输出应如下所示：

使用CSS和jQuery的简单“号召性用语”按钮

我们完成了下载按钮的第一个状态的创建。 让我们创建一个新组并将所有层移入其中。 复制组 ，然后将其放置在第一组下。 我们已经创建了。

使用CSS和jQuery的简单“号召性用语”按钮

转到重复的组，并使用以下设置更改第二个矩形框（悬停的矩形框）的“ 渐变叠加和笔触”样式：

使用CSS和jQuery的简单“号召性用语”按钮

使用CSS和jQuery的简单“号召性用语”按钮

选择第二组后，使用“ 移动”工具将整个矩形框向下移动到画布的下半部分。

使用CSS和jQuery的简单“号召性用语”按钮

而已！ 我们完成了第一部分。 将您的图片另存为download.png并启动您喜欢的代码编辑器。

下载PSD

第二部分– HTML

步骤1 –准备必要的文件

创建一个文件夹，并为其命名。 在本教程中，我们将其命名为jQueryCallToaction 。 在jQueryCallToaction文件夹中，创建以下文件/文件夹：

    1. 空白HTML文件index.html
    2. 空白CSS文件style.css
    3. 空白JavaScript文件script.js
    4. 文件夹，名为“ images ”
    5. 将download.png放置在图像文件夹中。

第2步–将index.html与CSS和JS链接

让我们将CSS和JavaScript链接到index.html 。 将它们放在<head></head> 。 我们从CSS文件开始： 

<link href="style.css" rel="stylesheet" type="text/css" />

然后是来自Google AJAX库存储库 的jQuery的最新版本 ： 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

最后是我们的JavaScript文件 ： 

<script type="text/javascript" src="script.js"></script>

现在我们的<head>应该看起来像这样： 

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

让我们在<body>标签中放置按钮的代码： 

<p><a href="#" class="button1"></a></p> <!-- CSS only -->
<p class="button2"><a href="#"></a></p> <!-- CSS + jQuery -->

说明：我们为两个按钮创建了段落，每个按钮都用<p></p>包裹，内部带有超链接<a></a> 。 第1行： class="button1"放在<a> ，而第2行： class="button1"放在<p>

步骤3.1 –仅CSS按钮

我们将仅使用CSS创建第一个按钮。 打开style.css并将以下代码粘贴到其中。 

.button1 /* Button with CSS only */ 
{
	background: url(images/download.png) 0 0;
	height:65px;
	width:580px;
	display:block;
}
.button1:hover /* mouseOver */ 
{
    background: url(images/download.png) 0 65px;
}

说明：我们的第一个按钮是100％HTML / CSS按钮。 CSS属性background加载的download.png图像的width恰好为580px，但height一半仅为65px（130/2），因此只显示download.png中的两个按钮之一。 按钮的位置由background属性的最后一个值确定和控制。 将background属性的最后一个值视为图像应从何处开始（以像素的高度位置为单位）。

步骤3.2 – CSS + jQuery Button

我们将在第二个按钮中使用相同的图片download.png 。 区别在于：我们的第二个按钮将注入jQuery效果以使动画更平滑。 让我们从CSS开始 。 将以下代码放入style.css 。 

.button2, .button2 a {
    background: url(images/download.png) 0 -65px;
    height:65px;
    width:580px;
    display:block;
}
.button2 a {
	background-position: 0 0;
}

说明：基本上， .button2 {}和.button2 a {}共享相同的样式，除了background属性中的最后一个值。 .button2 {}显示蓝色按钮，而.button2 a {}显示白色按钮。

使用CSS和jQuery的简单“号召性用语”按钮

CSS部分完成。 我们将使用jQuery在两种状态之间交换以创建平滑的过渡效果。 打开script.js并将以下代码放入其中。 

$(document).ready(function(){
   $('.button2 a').hover(function(){
   $(this).stop().animate({'opacity' : '0'}, 500);
   }, function(){$(this).stop().animate({'opacity' : '1'}, 500);});
});

说明： $(this)指向.button2 a ，将其悬停时，我们将使用jQuery动画将此元素的不透明度设置为0以便我们可以看到.button2元素（蓝色按钮）。 当鼠标移出时，我们将以500毫秒的动画速度将不透明度设置为1 。

而已 ！

感谢您关注本教程。 希望您喜欢它并逐步遵循它。 如果您正确地完成了所有操作，那么您应该会得到这样的结果 。 如果您有任何问题或需要帮助，请随时将您的问题写到评论部分。

以下是本教程所有必需文件的摘要：

编者注：这篇文章是由Ryan Turki为Hongkiat.com撰写的。 Ryan是热爱Photoshop的网络开发人员（Javascript，PHP，XHTML，CSS）兼设计师。

翻译自: https://www.hongkiat.com/blog/simple-call-to-action-button-with-css-jquery/

相关推荐