Buttons in CSS

Buttons in CSS can be styled a number of ways. ou can create a button using a modified anchor element (a). Buttons can also be created using input elements ( input). And they can be created using the button element (button)

The Inspector

The ispector in Firefox or Chrome, can be pulled up for debugging our code. to access tyhe inspector, you shou;ld right-click ion an empty area of the screen, then sel;ect the 'inspect' option. The inspector allows you to change, turm on/off and add properties to elements on the fl without permant;y changing your code.

Anchor elements like the one below, are inline by default. In order to style them to behave like buttons, we have to turn them into block elements. This is done using the display: block; CSS declaration. Click Me!

Input elements are form specifioc elemnts that can be a varirty of dofferent types. The type below is 'sumbit', which means that is is gpimg to be a button. There are other types as well, wuch as 'text', 'radio' , checkbox' ect. Tnhese other types are used for diferent form elements.

The button elemnt below, is a geralized HTML button object. It can be used in cojunction with forms and is considered to be a little but more semantic than the input button abovw.

:hover Pseudo Class

Pseudo classes are applied to CSS selectors in order to determine what happens when the state of the selector changes. :hover is the most commonly seen psuedo class. Its job is to wait until a user hovers over an element , then it runs code that changes that element in some way.

An example of how yo wrie a psuedo :hover class:

.my button: hover {
background : 33ffaa;


Transitions are used to create simple CSS animations. They are typically utlized on text or button elements and create an intesresting visual effect.

The tranistion property, takes in three main values. The first is what you want to transition. The second is how long the transition should last (in seconds). The third is the animation or easing style.

Web Fonts, such as those available from services like Google, Web Fonts, Font Squirrlel, Typekit ect. are special font files that can be connected and used on websites. Some print fonts/typefaces cannot be used on the web, because they lack a web font variant.

Google Web Fonts is available here: Google Web Fonts