CSS web button design: create a variety of cool button styles

CSS web button design: Create various cool button styles, specific code examples are required

In web design, buttons are a very important element because It is not only the link between users and the website, but also increases the overall visual effect and user experience. A good button style must not only have an attractive appearance, but also take into account some functional details, such as click effects, hover effects, etc. This article will share with you some CSS button design techniques and cool styles, as well as provide code examples, hoping to help you better design buttons and add more creativity to websites and applications.

1. Basic CSS button

First, let’s take a look at the most basic CSS button style:

HTML code:

<button class="btn">Click me</button>

CSS style:

.btn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.btn:hover {
  background-color: #3e8e41;
}

This button has a green background, white text and rounded borders. When the mouse hovers over the button, the background color changes to dark green, achieving a simple hover effect. This button style can basically be applied to most scenarios.

2. 3D stereoscopic effect button

Let’s create a 3D stereoscopic effect button:

HTML code:

<button class="btn-3d">Click me</button>

CSS style:

.btn-3d {
    border: none;
    color: #fff;
    font-size: 25px;
    line-height: 1;
    margin: 20px;
    padding: 10px 20px;
    position: relative;
    text-align: center;
    text-shadow: rgba(0,0,0,.4) 1px 1px;
    transform-style: preserve-3d;
    transition: all .3s ease-out;
    background: linear-gradient(to bottom, #556270 0%,#616161 100%);
    background-color: #556270;
}

.btn-3d:before,
.btn-3d:after {
    border: none;
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    left: 0;
    height: 4px;
    width: 100%;
    transform-style: preserve-3d;
    transition: all .3s ease-out;
}

.btn-3d:before {
    background: #BD3F32;
    transform: translateZ(-1px);
    box-shadow: 0 0 8px rgba(189,63,50,.7);
}

.btn-3d:after {
    background: #3F7FBC;
    transform-origin: left;
    transform: rotateY(90deg) translateZ(-1px);
    box-shadow: 0 0 8px rgba(63,127,188,.7);
}

.btn-3d:hover {
    background: linear-gradient(to bottom, #BD3F32 0%,#616161 100%);
    transform: translateZ(-6px);
    text-shadow: none;
    box-shadow: 0 0 8px rgba(0,0,0,.5);
}

.btn-3d:hover:before {
    transform: translateZ(-13px) rotateY(60deg);
}

.btn-3d:hover:after {
    transform: rotateY(-60deg) translateZ(-13px);
    transition-delay: .05s;
}

This button style has an obvious 3D three-dimensional appearance effect and a translation/rotation effect in the hover state, which not only brings a visual impact to the user, but also increases the user experience.

3. Background change button

The button style below provides users with better visual cues through the gradient change of the background color:

HTML code:

<button class="btn-change">Click me</button>

CSS style:

.btn-change {
    cursor: pointer;
    display: inline-block;
    margin: .5rem;
    padding: .75rem 1.5rem;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

.btn-change:before {
    border-right: 1px solid white;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: skew(-15deg) scaleY(1.4);
    width: 0;
}

.btn-change:hover:before {
    width: 100%;
    transition: all .3s ease;
}

.btn-change:after {
    border-left: 1px solid white;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transform: skew(15deg) scaleY(1.4);
    width: 0;
}

.btn-change:hover:after {
    width: 100%;
    transition: all .3s ease;
    transition-delay: .15s;
}

The characteristic of this button style is that the background color changes more gradually in the hover state, which can better guide the user visually.

4. Hollow-out effect button

Next, we will create a very cool hollow-out effect button style:

HTML code:

<button class="btn-void">Click me</button>

CSS style :

.btn-void {
    border: solid 2px #bada55;
    background: none;
    color: #bada55;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 24px;
    position: relative;
    transition: all .35s;
    overflow: hidden;
}

.btn-void:before,
.btn-void:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #bada55;
    transition: all .35s;
}

.btn-void:before {
    height: 0%;
    width: 100%;
}

.btn-void:after {
    height: 100%;
    width: 0%;
}

.btn-void:hover,
.btn-void:focus,
.btn-void:active {
    border-color: #bada55;
    color: #fff;
}

.btn-void:hover:before,
.btn-void:focus:before,
.btn-void:active:before {
    height: 100%;
}

.btn-void:hover:after,
.btn-void:focus:after,
.btn-void:active:after {
    width: 100%;
}

The characteristic of this button style is that in the hover state, a white border appears around the button, the rectangular area inside the button turns white, and the button text turns green. When the whole is restored, there is a gradient effect.

5. Loading button

Finally, let’s look at a button style with loading status:

HTML code:

<button class="btn-loading">Submit</button>

CSS style:

.btn-loading {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  position: relative;
}

.btn-loading:after {
  content: "";
  position: absolute;
  top:50%;
  left: 50%;
  border: 6px solid #e6e6e6;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
  border-top-color: #3498db;
  animation: spin 2s linear infinite;
  display: none;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.btn-loading.loading:after {
  display: block;
}

The characteristic of this button style is that after clicking the submit button, the button content will be hidden, and a rotating animation will appear to remind the user that it is loading. The overall effect is relatively intuitive.

Summary

Through the introduction of the above five button styles, we can clearly see that a good button not only needs attractive visual effects, but also needs to pay attention to some functional details, such as Changes in hover state, interaction after click, etc. The button styles provided in this article are all written based on CSS and can be easily applied in actual projects. When writing web pages, you can pay more attention to the implementation of some special effects and create buttons that better suit your needs.

The above is the detailed content of CSS web button design: create a variety of cool button styles. For more information, please follow other related articles on the PHP Chinese website!