Bootstrap 5 Reboot Pointers on Buttons
Bootstrap 5 Reboot is a collection of element-specific CSS that changes in a single file, kickstart Bootstrap provides an elegant, consistent, and simple baseline to build upon. Reboot Pointers on buttons can be created by adding role=”button” attribute to the element. It changes the default cursor to the pointer when we hover over the element.
Reboot Pointers on buttons used Attribute:
- role=”button”: This attribute is used to change the default cursor style to the pointer on the element.
Syntax:
<span role="button" tabindex="0">...</span>
Example 1: In this example, we will learn about Reboot Pointers on buttons.
HTML
<!DOCTYPE html><html> <head> <title> BootStrap5 Reboot Pointers on buttons </title> rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"></head> <body class="container"> <div> <h1 class="text-success"> GeeksforGeeks </h1> <h3>Reboot Pointers on buttons</h3> <p> Point on GeeksforGeeks, cursor will be changes to pointer: <span role="button" tabindex="0"> GeeksforGeeks </span> </p> </div></body> </html> |
Output:
Example 2: In this example, we will see how can we display some information of element along with changing cursor to pointer. This can be done by using title attribute
HTML
<!DOCTYPE html><html> <head> <title> BootStrap5 Reboot Pointers on buttons </title> rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"></head> <body class="container"> <div> <h1 class="text-success"> GeeksforGeeks </h1> <h3> Reboot Pointers on buttons</h3> <p> Point on GeeksforGeeks, cursor will be changes to pointer: <span role="button" tabindex="0" title="www.geeksforgeeks.org"> GeeksforGeeks </span> </p> </div></body> </html> |
Output
Reference: https://getbootstrap.com/docs/5.0/content/reboot/#pointers-on-buttons
Please Login to comment...