How to make Button effect by CSS
Editor to share with you how to make CSS button effect, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!
Basic Button Styl
Default button CSS button
CSS instance
.button {
Background-color: # 4CAF50; / * Green * /
Border: none
Color: white
Padding: 15px 32px
Text-align: center
Text-decoration: none
Display: inline-block
Font-size: 16px
}
CSS button
Button color
GreenBlueRedGrayBlack
We can use the background-color property to set the button color:
CSS instance
.sciention1 {background-color: # 4CAF50;} / * Green * /
.sciention2 {background-color: # 008CBA;} / * Blue * /
.sciention3 {background-color: # f44336;} / * Red * /
Background-color 4 {background-color: # e7e7e7; color: black;} / * Gray * /
.uploon5 {background-color: # 555555;} / * Black * /
Give it a try »
Button size
10px12px16px20px24px
We can use the font-size property to set the button size:
CSS instance
.pragon1 {font-size: 10px;}
.sciention2 {font-size: 12px;}
.sciention3 {font-size: 16px;}
.sciention4 {font-size: 20px;}
.uploon5 {font-size: 24px;}
CSS button
Fillet button
2px4px8px12px50%
We can use the border-radius property to set the fillet button:
CSS instance
.sciention1 {border-radius: 2px;}
.sciention2 {border-radius: 4px;}
.uploon3 {border-radius: 8px;}
.uploon4 {border-radius: 12px;}
.uploon5 {border-radius: 50%;}
Give it a try »
Button border color
Green, blue, red, gray and black
We can use the border property to set the button border color:
CSS instance
.button1 {
Background-color: white
Color: black
Border: 2px solid # 4CAF50; / * Green * /
}
...
Give it a try »
Mouse over button
Green, blue, red, gray and black
Green, blue, red, gray and black
We can use the: hover selector to modify the style of the mouse over the button.
Tip: we can use the transition-duration property to set the speed of the "hover" effect:
CSS instance
.button {
-webkit-transition-duration: 0.4s; / * Safari * /
Transition-duration: 0.4s
}
.button: hover {
Background-color: # 4CAF50; / * Green * /
Color: white
}
...
The above is all the content of the article "how to make button effects in CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
