Home >Web Front-end >CSS Tutorial >One trick to teach you how to use css3 to create buttons and add dynamic effects (code sharing)

One trick to teach you how to use css3 to create buttons and add dynamic effects (code sharing)

奋力向前Original: 2021-09-06 17:08:002653browse

In the previous article "Newbie: How to use ccs to make a simple layout (with code)", I introduced you how to use ccs to make a simple layout. The following article will introduce to you how to use css3 to create buttons and add dynamic effects. Let’s see how to do it together.

##cssHow to achieve the button button effect?

HTML structure:

First define a

body, use the button button, add the text value and set it to "Start Game" to facilitate setting class to idSelector.

<body>
<input id="search" name="cx" type="button" value="开始游戏" class="btn search">
</body>

Effect code

One trick to teach you how to use css3 to create buttons and add dynamic effects (code sharing) ##The effect comes out and you can see the button effect, but no dynamic decoration is added to it. By using

css

Add dynamic effects to it and let’s see how to do it. css editing code:

1. Between

style

, initialize the style of search, add setting height and width, and then use settings Background background, set no-repeat This attribute background image will not be repeated. <pre class="brush:php;toolbar:false">.search { width: 185px; height: 70px; background: url(images/btn_08.jpg) no-repeat center; }</pre>Code effect

One trick to teach you how to use css3 to create buttons and add dynamic effects (code sharing) 2. Next, add a rounded corner effect to the

css3

button and set the properties for each border# The four values of ##, and finally set the center alignment using float: left. <pre class="brush:php;toolbar:false">border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -moz-border-radius: 8px; float: left; </pre>Code effect

The four-point edge rounded corner effect is out One trick to teach you how to use css3 to create buttons and add dynamic effects (code sharing)

3. Give

Add font size, text alignment, and font thickness to the style, and set the style, color, and shape of all borders of the

border element.

font-size: 30px;
text-align: center;
font-weight: bold;
border: none;
color: #fff;
cursor: pointer;
line-height: 70px;
font-family: 微软雅黑;

4. Between style

, initialize the style of

btn, add setting height and width, and then use set background background.

.btn {
		    width: 383px;
		    height: 70px;line-height: 0;
		    border: 2px solid #a2f3ff;
		    background: #f3682d;
		    
		}

Code effect

5. Then add font size, text alignment, font thickness, and settings to One trick to teach you how to use css3 to create buttons and add dynamic effects (code sharing) btn

borderThe style, color, and shape of all borders of the element.

border-radius: 37px;
-webkit-border-radius: 37px;
-o-border-radius: 37px;
-moz-border-radius: 37px;
text-shadow: 3px 2px #d4481b;
-webkit-text-shadow: 3px 2px #d4481b;
-o-text-shadow: 3px 2px #d4481b;
-moz-text-shadow: 3px 2px #d4481b;
font-family: 微软雅黑;

Code effect

6. Bind animation to One trick to teach you how to use css3 to create buttons and add dynamic effects (code sharing) search

#search{
		    animation: breathe 1.1s infinite;

7、使用@keyframes规则，创建动画。

@keyframes breathe{
		  0%{ transform: scale(.99); }
		  50%{ transform: scale(1.03); }
		  100%{ transform: scale(.99); }
		}

代码效果

One trick to teach you how to use css3 to create buttons and add dynamic effects (code sharing)

ok,编辑代码完成。

完整代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>button按钮</title>
	<style type="text/css">	
		.search {
		    width: 185px;
		    height: 70px;
		    background: url(images/btn_08.jpg) no-repeat center;
		    border-radius: 8px;
		    -webkit-border-radius: 8px;
		    -o-border-radius: 8px;
		    -moz-border-radius: 8px;
		    float: left;
		    font-size: 30px;
		    text-align: center;
		    font-weight: bold;
		    border: none;
		    color: #fff;
		    cursor: pointer;
		    line-height: 70px;
		    font-family: 微软雅黑;
		}
		.btn {
		    width: 383px;
		    height: 70px;line-height: 0;
		    border: 2px solid #a2f3ff;
		    background: #f3682d;
		    margin: 22px 0 0 17px;
		    border-radius: 37px;
		    -webkit-border-radius: 37px;
		    -o-border-radius: 37px;
		    -moz-border-radius: 37px;
		    text-shadow: 3px 2px #d4481b;
		    -webkit-text-shadow: 3px 2px #d4481b;
		    -o-text-shadow: 3px 2px #d4481b;
		    -moz-text-shadow: 3px 2px #d4481b;
		    font-family: 微软雅黑;
		}
		#search{
		    animation: breathe 1.1s infinite;
		}
		@keyframes breathe{
		  0%{ transform: scale(.99); }
		  50%{ transform: scale(1.03); }
		  100%{ transform: scale(.99); }
		}
	</style>
</head>
<body>
	<input id="search" name="cx" type="button" value="开始游戏" class="btn search">
</body>
</html>

推荐学习：CSS3视频教程

The above is the detailed content of One trick to teach you how to use css3 to create buttons and add dynamic effects (code sharing). For more information, please follow other related articles on the PHP Chinese website!

css css3 html Float class 选择器 border background

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：Beginner's article: How to use ccs to make a simple layout (with code)Next article：Beginner's article: How to use ccs to make a simple layout (with code)

See more

One trick to teach you how to use css3 to create buttons and add dynamic effects (code sharing)

Related articles