HTML, CSS and jQuery: Make a button with a floating effect-JS Tutorial-php.cn

HTML, CSS and jQuery: Make a button with a floating effect

WBOY

Release： 2023-10-24 12:09:39

Original

1051 people have browsed it

HTML, CSS and jQuery: Make a button with a floating effect

HTML, CSS and jQuery: Making a button with a floating effect requires specific code examples

Introduction:
Nowadays, web design has become a Art form, by using technologies such as HTML, CSS and JavaScript, we can add a variety of special effects and interactive effects to the page. This article will briefly introduce how to use HTML, CSS and jQuery to create a button with a floating effect, and provide specific code examples.

1. HTML structure
First, we need to create the basic structure required for the button in the HTML file. The code example is as follows:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>浮动按钮</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <button class="float-btn">点击我</button>
    </div>
  </body>
</html>

Copy after login

In the above code, we create a container <div class="container">, which contains a button<button class= "float-btn">. In order to achieve the floating effect, we also need to introduce CSS files in <head>.

2. CSS Style
Next, we use CSS to style the button and achieve a floating effect. Please look at the following CSS code example:

.container {
  width: 300px;
  height: 300px;
  position: relative;
}

.float-btn {
  width: 150px;
  height: 50px;
  background-color: #f00;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: transform 0.3s, box-shadow 0.3s;
}

.float-btn:hover {
  transform: translateX(-50%) translateY(-10px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

Copy after login

In the above code, we have styled the container and button respectively. The width and height of the container <div class="container"> are fixed to 300px and positioned relatively. Button<button class="float-btn"> styles include width and height, background color, font color, border style, rounded corner style, font size, etc. The button is also horizontally centered at the bottom of the container via absolute positioning and the left, transform attributes. transitionThe attribute is used to specify the transition time of the transformation effect.

In the :hover pseudo-class style of the button, we use the transition and transform attributes to implement the button's behavior when the mouse is hovering. Floating effect. When the mouse is hovered over the button, the button will float up 10px with a shadow effect.

3. jQuery dynamic effect
Finally, we use jQuery to add a dynamic effect of a click event to the button. The code example is as follows:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>浮动按钮</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div class="container">
      <button class="float-btn">点击我</button>
    </div>
  </body>
</html>

Copy after login

$(document).ready(function() {
  $('.float-btn').click(function() {
    $(this).toggleClass('active');
  });
});

Copy after login

In the above code, we first introduced the jQuery library file in . Then in the script.js file, use the $(document).ready() function to ensure that the following code is executed after the page is loaded. When the button is clicked, use the toggleClass() method to add or remove the active class for the button. This way, we can additionally style or animate the button while it's active.

Summary:
By using HTML, CSS and jQuery, we can create a variety of special effects and interactive effects, such as the buttons with floating effects shown in this article. I hope that through the code examples in this article, readers can have a preliminary understanding of how to achieve such an effect, and can further optimize and personalize the design according to their own needs.

The above is the detailed content of HTML, CSS and jQuery: Make a button with a floating effect. For more information, please follow other related articles on the PHP Chinese website!