Introduction

Buttons are an essential element of any website or application. They allow users to perform actions or navigate through your interface. This series of CSS properties and utility classes is designed to be flexible and easy to use.

Samples

o-btn o-btn-outline o-btn with icon o-btn-brand o-btn-bw o-btn-visited-gr

Buttons or links ?

A button is a user interface element that is used to trigger an action, such as submitting a form or navigating to a new page. It is typically represented as a rectangular or rounded rectangle shape that can be clicked or tapped. Buttons can be created using HTML and CSS or through programming languages such as JavaScript.

On the other hand, a link styled as a button is a hyperlink that is designed to look like a button. It can be created by applying CSS styles to a standard hyperlink, such as changing the background color, border, and font size. When clicked, a link styled as a button can also trigger an action, such as opening a new page or submitting a form.

The main difference between a button and a link styled as a button is their intended use. Buttons are best used for actions that change the state of an application, such as submitting a form, saving data, or deleting content. Links styled as buttons, on the other hand, are best used for actions that navigate to a different page or location, such as going to a new section of a website or opening a new window.

In general, if the user is performing an action that changes the state of an application, a button is the appropriate choice. If the user is navigating to a different page or location, a link styled as a button may be a better choice.

The base button

This is the base class to use on each button. It sets all properties and their defaults.

button hover state

o-btn