search

Home >Web Front-end >CSS Tutorial >Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing

Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing

青灯夜游
青灯夜游Original
2021-08-24 18:02:304651browse

In the previous article "How to create a waterfall flow layout with pure CSS3? In "A Brief Analysis of Columns Method", we introduced the method of using CSS3 column series properties to create a waterfall flow layout. Interested friends can learn about it~

And today we will take a look at how to use CSS3 to create a waterfall flow layout. Add dynamic effects to buttons to achieve a button hover shiny shadow animation effect, making the web page more interactive and attractive!

Let’s take a look at the renderings first

Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing

Let’s study how to achieve this effect:

First of all It is the HTML part, define a div container to wrap the button button, use the tag pair in the button to contain the button text

<div id="shiny-shadow">
  <button><span>鼠标悬停</span></button>
</div>

Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing

and then start Define css styles for modification: adjust layout style, color range

#shiny-shadow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #1c2541;
}

button {
  border: 2px solid white;
  background: transparent;
  text-transform: uppercase;
  color: white;
  padding: 15px 50px;
  outline: none;
}

span {
  z-index: 20;  
}

Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing

##Then create a flashing overlay:

  • Use the

    :after selector to create a rectangle with transparency and position it absolutely relative to the button button

    ##
    button {
  position: relative;
}
button:after {
	content: &#39;&#39;;
	display: block;
	position: absolute;
	background: white;
	width: 50px;
	height: 125px;
	opacity: 20%;
}

Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing

    In the final effect, what flashes past is a tilted rectangle; so we add a
  • transform: rotate(-45deg);

    Style

    button:after {
	transform: rotate(-45deg);
}

Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing

    Use the top attribute and left attribute to control the position of the rectangle

  • button:after {
	top: -2px;
	left: -1px;
}

Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing

Finally implement the button hover flashing animation effect

    Because it is a hover effect, it must be used
  • :hover

    Selector; we want to set the position of the rectangle when the mouse is hovering

    button:hover:after {
  left: 120%;
}

Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing

    Such a sudden change in position is not the effect we want. You can use the
  • transition

    attribute to add a transition effect, because this attribute is a new attribute of CSS3, and a prefix needs to be added to be compatible with other browsers 

    button:hover:after {
  left: 120%;
  transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
   -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
}

Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing

    Roughly achieved, let’s polish it up a bit.

    • If you only want the rectangular overlay to be displayed within the button range, you can add an
overflow: hidden;

style<pre class="brush:php;toolbar:false">button { overflow: hidden; }</pre># to the button label.

Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing

##It can be seen that there is still a problem with the position of the overlay. In the final effect, the overlay is not displayed at the beginning. We use the top attribute and the left attribute to adjust it. Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing

button:after {
	top: -36px;
	left: -100px;
}

OK, you’re done! The complete code is attached below: Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			#shiny-shadow {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100vh;
				background: #1c2541;
			}

			button {
				border: 2px solid white;
				background: transparent;
				text-transform: uppercase;
				color: white;
				padding: 15px 50px;
				outline: none;
				position: relative;
				overflow: hidden;
			}

			span {
				z-index: 20;
			}

			button:after {
				content: &#39;&#39;;
				display: block;
				position: absolute;
				background: white;
				width: 50px;
				height: 125px;
				opacity: 20%;
				transform: rotate(-45deg);
				top: -36px;
				left: -100px;
			}

			button:hover:after {
				left: 120%;
				transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
				-webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
			}
		</style>
	</head>
	<body>
		<div id="shiny-shadow">
			<button><span>鼠标悬停</span></button>
		</div>
	</body>
</html>

The PHP Chinese website platform has a lot of video teaching resources. Everyone is welcome to learn "

css Video Tutorial

"!

The above is the detailed content of Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Teach you step by step how to use CSS to create a simple heartbeat effect (detailed code explanation)Next article：Teach you step by step how to use CSS to create a simple heartbeat effect (detailed code explanation)

Related articles

See more