CSS Buttons

Creating Buttons with CSS

Previously, the use of a tag and pseudo classes (hover, active, visited) was explained.

In this topic, we will see how to get links in button view with css. In this way, we will not need to use different programs for button-style objects.

As you can see in the topic examples section, you will be able to prepare linkbuttons in many different styles.

In our next topics, menu making will be explained.

Let's examine the following codes:

In this example, let's pay particular attention to the following points:

• Since the a tag is an inline element, properties such as width, margin will not work properly in this tag. So it is necessary to convert it to a view like block or inline-block. By making inline-blocks, they are placed side by side. If the block was made, they would be placed one under the other.
• In the example, since the buttons are used side by side, padding is applied from the sides instead of giving width. In this way, the texts inside will also appear in the middle.
• Instead of using height, top and bottom padding is preferred. In this way, we can provide the vertical alignment of the text in the link more easily.
• In hover and active state, border is given, padding is reduced so that the total area of ​​the buttons does not change.

EXERCISES