This is the 27th day of my participation in the August More Text Challenge

The button element is the most common and ubiquitous element, whether it is the display page or the background management, there is a button location. As an essential element of user interaction, a few clever visuals can make the user experience up.

Box shadow

Use box-shadow and hover state to achieve the hover effect of mouse moving to the button. Using Transition, show the dynamic floating process.

.button {
  background-color: #4caf50;
  border: none;
  border-radius: 20px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition-duration: 0.4 s;
}

.button:hover {
  box-shadow: 0 12px 16px 0 rgba(0.0.0.0.24), 0 17px 50px 0 rgba(0.0.0.0.19);
}
Copy the code

Button Disable (disabled)

Add grayscale, transparency and disable mouse ICONS to tell the user that the button is disabled; Pointer-events Protects the disabled button from triggering any events.

.disabled {
  opacity: 0.6;
  filter: grayscale(100%);
  pointer-events: none;
  cursor: not-allowed;
}
Copy the code

Button in the animation

In the arrow

Hover inserts arrow from right to left by changing opacity and right position of arrow; With the padding-right of the text, the text moves left:

/* span: text container */
.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5 s;
}

/* Arrow: >> */
.button span:after {
  content: "»";
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5 s;
}

/* Text moves left */
.button:hover span {
  padding-right: 25px;
}

/* Arrows appear from the right */
.button:hover span:after {
  opacity: 1;
  right: 0;
}
Copy the code

Ripple effect

We use a pseudo-element to implement the water ripple (:after) and set the difference between the click state (:active) and the normal state to implement the water ripple effect.

In the normal state, the pseudo-element is a transparent circle that completely covers the button and is hidden by default.

button:after {
  content: "";
  position: absolute; /* To keep the position of the button */
  bottom: 0;
  left: 0;
  width: 150px;
  height: 150px;
  border-radius: 50% 50%; /* Water ripples are round */
  background: rgba(255.255.255.0.4); /* Water ripple color */
  transform: scale(2);
  opacity: 0;
  transition: all 0.8 s;
}
Copy the code

When clicking the button, the “active” state will be triggered, and the pseudo-elements will be rapidly reduced, i.e., no transition-duration: 0s, and opacity: 1 will be displayed.

button:active:after {
  transform: scale(0);
  opacity: 1;
  transition-duration: 0s;
}
Copy the code

When the :active state disappears, the restoration (magnification) of the pseudo-element produces a water ripple effect.

This is a pure CSS implementation. If you want the center of the water ripple to be determined by the mouse click position, you can do this by changing the positioning of the pseudo-element (the position is obtained when clicked and assigned to the pseudo-element).

“Pinch” effect

With :hover and :active, darker button background color; When :active, shorten the shadow range of the button (say 4px) and pan the button down to reduce the distance (4px) while deepening the shadow color:

.button {
  /* Other button styles... * /
  background-color: #4caf50;
  box-shadow: 0 9px # 999;
}

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

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px # 666;
  transform: translateY(4px);
}
Copy the code

Brief introduction to the new characteristics of CSS3

  • Border Border
  • Background & Gradient
  • Text Indicates the Text & @font-face
  • Transform element Transform
  • Transition effect
  • Animation Animation
  • Column Multi-column layout
  • Resize & Box-sizing & Outline-offset
  • Images into the order
  • Button in the advanced
  • Multimedia Query