How to use Css to make button shadow effect
This article mainly introduces how to use Css to make button shadow effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.
Button shadow
Shadow button displays shadows after mouse hover
We can use the box-shadow property to add shadows to the button:
CSS instance
.button1 {
Box-shadow: 0 8px 16px 0 rgba, 0 6px 20px 0 rgba
}
.button2: hover {
Box-shadow: 0 12px 16px 0 rgba, 0 17px 50px 0 rgba
}
Disable button
Normal button disable button
We can use the opacity property to add transparency to the button (which looks like the effect of the "disabled" property).
Tip: we can add the cursor attribute and set it to "not-allowed" to set a disabled image:
CSS instance
.disabled {
Opacity: 0.6
Cursor: not-allowed
}
Button width
250px
500%
By default, the size of the button is determined by the text content on the button (matches the length based on the text content). We can use the width property to set the width of the button:
Tip: if you want to set a fixed width, you can use px as a unit, and if you want to set a responsive button, you can set it to a percentage.
CSS instance
.pragon1 {width: 250px;}
.uploon2 {width: 50%;}
.sciention3 {width: 100%;}
Button group
ButtonButtonButtonButton
Remove the margin and add float:left to set the button group:
CSS instance
.button {
Float: left
}
Framed button group
ButtonButtonButtonButton
We can use the border property to set the button group with a border:
CSS instance
.button {
Float: left
Border: 1px solid green
}
Thank you for reading this article carefully. I hope the article "how to use Css to make Button Shadow effect" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
