Cursors

With Vitamin, you can easily customize the appearance of your cursor with CSS classes. Simply add a class to your HTML element, and you're done! Here's what you need to know about using Vitamin's cursor classes.


Avaliable classes

start just using .cursor- followeb by the cursor you want. Place it on a specific div or the entire body.

  • .cursor-none
  • .cursor-auto
  • .cursor-context
  • .cursor-help
  • .cursor-pointer
  • .cursor-progress
  • .cursor-wait
  • .cursor-cell
  • .cursor-crosshair
  • .cursor-text
  • .cursor-verticaltext
  • .cursor-alias
  • .cursor-copy
  • .cursor-move
  • .cursor-no-drop
  • .cursor-not-allowed
  • .cursor-all-scroll
  • .cursor-col-resize
  • .cursor-n-resize
  • .cursor-e-resize
  • .cursor-ne-resize
  • .cursor-nw-resize
  • .cursor-row-resize

Responsive

You can use the hover property too just adding an -h after the .cursor for example: .cursor-h-crosshair

Examples

Hover over the following divs to see the cursor

.cursor-none
.cursor-auto
.cursor-context
.cursor-help
.cursor-pointer
.cursor-progress
.cursor-wait
.cursor-cell
.cursor-crosshair
.cursor-text
.cursor-verticaltext
.cursor-alias
.cursor-copy
.cursor-move
.cursor-no-drop
.cursor-not-allowed
.cursor-all-scroll
.cursor-col-resize
.cursor-n-resize
.cursor-e-resize
.cursor-ne-resize
.cursor-nw-resize
.cursor-row-resize

note: we pretend to add custom designed cursors on future updates.