Hướng dẫn w3s button css
Learn how to style buttons using CSS. Show
Basic Button StylingExample .button { Try it Yourself » Button ColorsUse the Example .button1 {background-color: #4CAF50;} /* Green */ Try it Yourself » Button SizesUse the Example .button1 {font-size: 10px;} Try it Yourself » Use the Example .button1 {padding: 10px 24px;} Try it Yourself » Rounded ButtonsUse the Example .button1 {border-radius: 2px;} Try it Yourself » Colored Button BordersUse the Example .button1 { Try it Yourself » Hoverable ButtonsUse the Tip: Use
the Example .button { .button:hover { Try it Yourself » Shadow ButtonsUse the
Example .button1 { .button2:hover { Try it Yourself » Disabled ButtonsUse the Tip: You can also add the Button WidthBy default, the size of the button is determined by its text content (as wide as its content). Use the Example .button1 {width: 250px;} Try it Yourself » Button Groups
Bordered Button Group
Vertical Button Group
Button on ImageTry it Yourself » Animated ButtonsW3.CSS Button ClassesW3.CSS provides the following classes for buttons:
ButtonsBoth the w3-button class and the w3-btn class add button-behavior to any HTML elements. The most common elements to use are , ExampleTry It Yourself » Button ColorsAll the w3-color classes is used to add color to buttons: Example
Try It Yourself » Hover ColorsHover effects also come in all colors. Here are some: The w3-hover-color classes is used to add hover color to buttons: Example
Try It Yourself » Button ShapesThe w3-round-size classes are used to add rounded borders to buttons: Example
Try It Yourself » Button SizesThe w3-size classes can be used to define different text sizes: Example
Try It Yourself » Button BordersThe w3-border class can be used to add borders to buttons. The w3-border-colorclasses are used to define the color of the border: Example
Try It Yourself » Tip: Add the w3-round-size class to add rounded borders. Buttons With Different Text EffectsButtons can use a wider text effects: The w3-wide class adds a wider text effect: Example
Try It Yourself » Buttons can have italic and bold text effects: Use standard HTML tags ( and ) to add italic or bold effect to the button text: Example
Try It Yourself » Buttons With PaddingThe w3-padding-size classes is used to add extra padding around the button text: Example
Try It Yourself » Full-width ButtonsTo create a full-width button, add the w3-block class to the button. Full-width buttons have a width of 100%, and spans the entire width of the parent element: Example
Try It Yourself » Tip: Align the button text with the w3-left-align class or the w3-right-align class. The size of the a block can be defined using style="width:". Example
Try It Yourself » Disabled ButtonsButtons stand out with a shadow effect and the cursor turns into a hand when mousing over them. Disabled buttons are opaque (semi-transparent) and display a "no parking sign": The w3-disabled class is used to create a disabled button (if the element support the standard HTML disabled attribute, you can use the disabled attribute instead): ExampleTry It Yourself » Button BarsButtons can be grouped together in a horizontal bar using the w3-bar class: ExampleTry It Yourself » The w3-bar class was introduced in W3.CSS version 2.93 / 2.94. Buttons can be grouped together without a space between them by using w3-bar-item class: ExampleTry It Yourself » Buttons bars can be centered using the w3-center class: ExampleTry It Yourself » To show two (or more) button bars on the same line, add the w3-show-inline-block class: ExampleTry It Yourself » Navigation BarsButton bars can easily be used as navigation bars: ExampleTry It Yourself » The size of each items can be defined by using style="width:": ExampleTry It Yourself » You will learn more about navigation later in this tutorial. Left and Right ButtonsUse the .w3-left class and the .w3-right class to float buttons to the left or to the right: Used to create "previous/next" buttons: ExampleTry It Yourself » Buttons With Ripple EffectsThe w3-ripple class creates a ripple effect on buttons (when they are clicked on): Example
Try It Yourself » All Elements Can Be ButtonsWith W3.CSS, all elements can be a button: A picture can be a w3-button A picture can be a w3-btn Any div, header, footer or other containers can be a w3-button! Any div, header, footer or other containers can be a w3-btn! Circular ButtonsThe w3-circle class can be used to create circular buttons: + + Example
Try It Yourself » Square buttons: + + ExampleTry It Yourself » |