background-color: #58257b; /* màu của Quản trị mạng ^^ */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Use the background-color attribute to change the background color for the generated buttons:
.button1 {background-color: crimson;}
.button2 {background-color: lightsalmon;}
.button3 {background-color: seagreen;}
.button4 {background-color: midnightblue;}
.button5 {background-color: indigo;}
You use font-size or padding properties to change the size of the generated buttons. Using font-size, the button scales according to the font size:
.button1 {font-size: 10px;background-color: Crimson;}
.button2 {font-size: 12px;background-color: LightSalmon;}
.button3 {font-size: 16px;background-color: SeaGreen;}
.button4 {font-size: 20px;background-color: MidnightBlue;}
.button5 {font-size: 24px;background-color: Indigo;}
Using padding to change the space between the display content of the element and its contour, this property can also change the size of the button while maintaining the content size.
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
By default , the size of the node is determined by its text content (as wide as the content inside the element). However, you can also easily use the width width attribute to change the width of the button:
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
Use the border-radius attribute to round the corners of the buttons by defining the radius of the corners and rounding it with that radius.
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
You add and practice with the attributes above to see the changes.
You use the border attribute to change the border color for the button.
.button1 {
background-color: white;
color: black;
border: 2px solid #DC143C;
}
.
Use the opacity attribute to add transparency to the button (create "disable" interface).
Tip: You can also add cursor attributes to the "not-allowed" value to display a mark that cannot be clicked when you hover over:
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
Use: hover selector to change the button style when you hover over.
Tip: Use the transition-duration attribute to determine the speed of the hover effect:
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: crimson;
color: white;
}
.
Use the box-shadow attribute to add shadows to the button:
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
Delete the margin attribute and add float: left to each button to join the nodes together to form the above group.
.button {
float: left;
}
The vertical grouped buttons use display: block instead of float: left to overlap the nodes:
.button {
display: block;
}
Add an arrow to the button when hovering over:
Add Fade effect when hover:
Add "ripple" effect when clicking: