These Simple CSS Tricks Will Take Your Website to the Next Level
Tags: css, beginners, webdev, programming
Published: 2023-07-06 15:43:54

## What is CSS?
CSS, or Cascading Style Sheets is a front-end language used to make your website look good. Without CSS, your website would just be a skeleton with no character. CSS enables you to control the layout, colors, fonts, and other visual aspects of a web page.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bshyosbnb2rn4wfmckof.png)

In this blog, I'm going to share with you some very small and subtle css details that you probably wouldn't think of to add to you website, but once you do, you'll never turn back.

## The Cursor


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmx26xhqq8z5ggjakin0.png)

Although it may seem like a miniscule detail, changing the cursor when you hover over certain objects is a game changer! Typically websites are mostly text, so whenever you hover over something, the cursor will be the text cursor.

* **Default** You can use the default cursor for when you're hovering over text, but dont want the text cursor.
* **Crosshair** You can use the crosshair cursor for when you want the user to be able to edit something.
* **Text** You can use the text cursor for when you want the user to be able to select text.
* **Pointer** You can use the pointer cursor for when you want to indicate that the user can click what they are hovering over (button, link, etc.).
* **Grab** You can use the grab cursor for when you want to indicate that the user can grab and move what they are hovering over.
* **Grabbing** You can use the grabbing cursor for when you want to indicate that the user is grabing and/ or moving what they are hovering over.
* **Move** You can use the move cursor for when you want to indicate that the user can move what they are hovering over.
* **Zoom-In** You can use the zoom-in cursor for when you want to indicate that the user can zoom-in on what they are hovering over.
* **Zoom-Out** You can use the zoom-out cursor for when you want to indicate that the user can zoom-out on what they are hovering over.
* **Not-Allowed** You can use the not-allowed cursor for when you want to indicate that the user cannot grab, move or select what they are hovering over.
* **Help** You can use the help cursor for when you want to indicate to the user that there is a helpful link or pop-up if they click what they are hovering over.
* **Wait** You can use the wait cursor for when you want to indicate thot the user that whatever they are hovering over or have clicked on is loading.


## Opacity 
If you have images or links in your website, opacity can be a great thing to play with as it can give a great effect when the user hovers over the element. You can go one of two ways, have the element default with a lesser opacity (0.5) and change the opacity to full or 1 on hover, or the opposite. When the element is initially dull and you set the hover opacity to 1, the element will come alive when the user hovers over it. On the contrary, if you want your site to pop a bit more, leave the element's opacity alone for the default and set it to 0.5 on hover to indicate that the user is indeed hovering over it.


Here's an example of full opacity to 0.5:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfzxe61k5expylgpiia4.gif)

```
img{
  height: 200px;
  width: 200px;
}
img:hover{
  opacity: 0.5;
  cursor: pointer;
}
```
And the opposite:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxffr2lgcaty5e9l3ke0.gif)

```
img{
  height: 200px;
  width: 200px;
  opacity: 0.5;
}
img:hover{
  opacity: 1;
  cursor: pointer;
}
```


## Button Click
Another cool thing you can do is simulate a button click! To do this you can translate the button either up and down, left and right, or both!

Here's an example of up and down:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vbt2gs2jb6yszl3ndplm.gif)

```
button{
  height: 50px;
  width: 125px;
}
button:hover{
  cursor: pointer;
}
button:active{
  transform: translateY(4px);
}
```
(Negative numbers makes it go down! If you wanted it to go up, make it a positive.)


Here's an example of left and right:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qajsov927xkq70kmc0lu.gif)

```
button{
  height: 50px;
  width: 125px;
}
button:hover{
  cursor: pointer;
}
button:active{
  transform: translateX(-4px);
}
```
(Negative numbers makes it go left! If you wanted it to go right, make it a positive.)


And here's and example of both:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z8q5wdl07rb2z9l41xf0.gif)

```
button{
  height: 50px;
  width: 125px;
}
button:hover{
  cursor: pointer;
}
button:active{
  transform: translate(-4px, 4px);
}
```

## Borders
You can also spice up any element with a border! You can mess with the color, corners, and style.

* **Color** You can make the border and color you want. You can even make each side a different color using border-left, -right, -top, and -bottom.

Here's an example:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfur0i0hvskf3sdh52w7.png)
```
button{
  border-left: 5px solid red;
  border-top: 5px solid  orange;
  border-right: 5px solid  pink;
  border-bottom: 5px solid purple;
}
```


* **Corners** Same with color, you can also make the border radius of each corner different! The value order goes: top-left, top-right, bottom-right, bottom-left.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1kxmhtjvvtqk9wufa09.png)
```
button{
  border-radius: 15px 50px 30px 5px;
}
```


* **Style** There are a few styles you can choose for your border, and just like the two properties above, each side can have a different style using border-left, -right, -top, and -bottom.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0wi0bg1kwjfxg3wjm7k.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kuym5tfnkfcdwohyz6nu.png)

```
button{
  border-left: 5px solid red;
  border-top: 5px dotted  orange;
  border-right: 5px dashed  pink;
  border-bottom: 5px double purple;
}
```


##Conclusion
Although there are quite literally thousands of cool things you can do with CSS, using these small tricks like cursors, opacity, button clicks, and borders can help take your website to the next level.