How to implement submit button in css

藏色散人
Release: 2023-02-01 09:51:48
Original
2045 people have browsed it

How to implement the submit button in css: 1. Define a button through the HTML

How to implement submit button in css

The operating environment of this tutorial: Windows 10 system, CSS3 version, DELL G3 computer

How to implement css Submit button?

Pure CSS to implement several good-looking buttons

##1. Mouse Hover

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}
 
.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}
 
.button1:hover {
    background-color: #4CAF50;
    color: white;
}
 
.button2 {
    background-color: white; 
    color: black; 
    border: 2px solid #008CBA;
}
 
.button2:hover {
    background-color: #008CBA;
    color: white;
}
 
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
Copy after login

We can use the

:hover selector to modify the style of the mouse hovering over the button, using transition The -duration attribute can set the speed of the "hover" effect.

2. Mouse hover button with shadow

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

.button1:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

<button class="button button1">鼠标悬停后出现阴影</button>
Copy after login

##After adding shadow, the button looks more three-dimensional

3. Add an arrow icon to the button after hovering the mouse

.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  vertical-align:middle;
}

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

.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

<button class="button"><span>Hover </span></button>
Copy after login

4. Water wave effect when the button is clicked

.button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.button:after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}

<button class="button">Click Me</button>
Copy after login

5. The effect of "pressing down" when clicking the button

.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;   
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

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

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

<button class="button">Click Me</button>
Copy after login

Recommended study: "

css video tutorial

The above is the detailed content of How to implement submit button in css. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template