One trick to teach you how to use css3 to create buttons and add dynamic effects (code sharing)-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

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

奋力向前

Sep 06, 2021 pm 05:08 PM

csscss3html

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.

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

##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!

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

Two Images and an API: Everything We Need for Recoloring ProductsApr 15, 2025 am 11:27 AM

I recently found a solution to dynamically update the color of any product image. So with just one of a product, we can colorize it in different ways to show

Weekly Platform News: Impact of Third-Party Code, Passive Mixed Content, Countries with the Slowest ConnectionsApr 15, 2025 am 11:19 AM

In this week's roundup, Lighthouse sheds light on third-party scripts, insecure resources will get blocked on secure sites, and many country connection speeds

Options for Hosting Your Own Non-JavaScript-Based AnalyticsApr 15, 2025 am 11:09 AM

There are loads of analytics platforms to help you track visitor and usage data on your sites. Perhaps most notably Google Analytics, which is widely used

It's All In the Head: Managing the Document Head of a React Powered Site With React HelmetApr 15, 2025 am 11:01 AM

The document head might not be the most glamorous part of a website, but what goes into it is arguably just as important to the success of your website as its

What is super() in JavaScript?Apr 15, 2025 am 10:59 AM

What's happening when you see some JavaScript that calls super()?.In a child class, you use super() to call its parent’s constructor and super. to access its

Comparing the Different Types of Native JavaScript PopupsApr 15, 2025 am 10:48 AM

JavaScript has a variety of built-in popup APIs that display special UI for user interaction. Famously:

Why Are Accessible Websites so Hard to Build?Apr 15, 2025 am 10:45 AM

I was chatting with some front-end folks the other day about why so many companies struggle at making accessible websites. Why are accessible websites so hard