CSS3 technical practice: create beautiful button styles

CSS3 Technical Practice: Creating Beautiful Button Styles

Introduction:
In web design, buttons are one of the very important elements. A good-looking button can not only improve the user experience, but also increase the beauty of the web page. CSS3 technology provides rich style selectors and animation effects, allowing us to easily create beautiful button styles. This article will introduce some commonly used CSS3 techniques and how to use them to create a variety of button effects.

1. Basic button styles

First, let’s create a set of basic button styles. The following is a sample code:

<style>
  .btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }
  .btn-primary {
    background-color: #3498db;
    color: #fff;
    border: none;
  }
  .btn-primary:hover {
    background-color: #2980b9;
  }
  .btn-secondary {
    background-color: #f39c12;
    color: #fff;
    border: none;
  }
  .btn-secondary:hover {
    background-color: #d35400;
  }
</style>

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>

In the above code, we first define a basic button style, the .btn class, which has some common characteristics, such as display: inline-block causes the button to be displayed as an inline block-level element, padding sets the padding of the button, font-size sets the font size of the button, etc.

Then, we define two different styles of buttons, .btn-primary and .btn-secondary classes. The .btn-primary class sets the blue background and white font color, and the .btn-secondary class sets the orange background and white font color. At the same time, we also use the :hover pseudo-class to set the effect when the mouse hovers over the button.

2. Floating button effect

Next, we try to create some floating button effects. Here is a sample code:

<style>
  .btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }
  .btn-primary {
    background-color: #3498db;
    color: #fff;
    border: none;
    transition: background-color 0.5s;
  }
  .btn-primary:hover {
    background-color: #2ecc71;
  }
  .btn-secondary {
    background-color: #f39c12;
    color: #fff;
    border: none;
    transition: box-shadow 0.5s;
  }
  .btn-secondary:hover {
    box-shadow: 0 0 10px #f39c12;
  }
  .btn-rotate {
    transform: rotate(45deg);
  }
</style>

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-rotate">Rotate Button</button>

In the above code, we have made some modifications to the basic button style. First, we added a transition effect transition: background-color 0.5s in the .btn-primary class to make the background color transitionally change within 0.5 seconds. When the mouse is hovering over the button, the background color changes from blue to green.

Next, we used another transition effect in the .btn-secondary classtransition: box-shadow 0.5s, when the mouse is hovering over the button , a shadow effect is added to the button.

Finally, we define a .btn-rotate class, which can achieve the rotation effect of the button. By transform: rotate(45deg), we rotate the button 45 degrees.

3. Rounded button effects

In addition to basic button styles and floating button effects, we can also create some rounded button effects. The following is a sample code:

<style>
  .btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 20px;
  }
  .btn-primary {
    background-color: #3498db;
    color: #fff;
    border: none;
  }
  .btn-primary:hover {
    background-color: #2980b9;
  }
</style>

<button class="btn btn-primary">Primary Button</button>

In the above code, we add a rounded corner effect to the button through the border-radius: 20px attribute to make it softer. At the same time, we have also adjusted the mouse hover effect.

Conclusion:
Through the above sample code, we can see that using CSS3 technology, we can easily create a variety of beautiful button styles. Whether it is basic button style, floating button effect or rounded button effect, it can all be achieved through simple code. I hope this article will help you understand and apply CSS3 technology. Come and try it!

The above is the detailed content of CSS3 technical practice: create beautiful button styles. For more information, please follow other related articles on the PHP Chinese website!