Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.