BOX SHADOW PROPERTIESbox-shadow :As its name implies, it is used to create the shadow of the button box. It is used to add the shadow to the button. We can also create a shadow during the hover on the button. Syntax: box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];Eg: < !DOCTYPE html> < html> < head> < title>button background Color< /title> < style> body{ text-align: center; } button { color:black; font-size: 15px; } .b1{ background-color: lightblue; border:5px blue double; border-radius: 10px; color:black; box-shadow : 0 8px 16px 0 black, 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .b2{ background-color: lightblue; border:5px blue dotted; color:black; border-radius: 10px; } .b2:hover{ box-shadow : 0 8px 16px 0 black, 0 6px 20px 0 rgba(0, 0, 0, 0.19); } < /style> < /head> < body> < button class="b1">Shadow on button< /button> < button class="b2">Box-shadow on hover< /button> < /body> < /html>Output : padding : It is used to set the button padding. Syntax : element { // padding style }Let's understand it using an illustration. Eg: < !DOCTYPE html> < html> < head> < title>button background Color< /title> < style> body{ text-align: center; } button { color:black; font-size: 15px; } .b1 { background-color: red; border:none; padding: 10px; box-shadow : 0 8px 16px 0 black, 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .b2 { background-color: blue; border:3px brown solid; padding:5px 10px 15px 20px; box-shadow : 0 8px 16px 0 black, 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .b3{ background-color:orange; border: 3px red dashed; padding-bottom:20px; box-shadow : 0 8px 16px 0 black, 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .b4{ background-color: gray; border: 3px black dotted; padding-left: 25px; box-shadow : 0 8px 16px 0 black, 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .b5{ background-color: lightblue; border:3px blue double; padding-right: 30px; box-shadow : 0 8px 16px 0 black, 0 6px 20px 0 rgba(0, 0, 0, 0.19); } < /style> < /head> < body> < h1>The padding property< /h1> < button class="b1">none< /button> < button class="b2">solid< /button> < button class="b3">dashed< /button> < button class="b4">dotted< /button> < button class="b5">double< /button> < /body> < /html>Output : The padding property« Previous Next Topic » (CSS - Hover & Overflow Properties) |