✅ Как создать разные виды курсоров?
В CSS есть множество разных типов курсоров, и все они созданы с помощью одного свойства cursor. CSS Свойство cursor определяет тип отображаемого курсора при наведении мыши на объект ⬇️
☑️ Указатель мыши на разных элементах выглядит по-разному. При этом, в CSS есть возможность напрямую указать вид курсора. Это можно сделать для любого элемента на странице. Для этого нужно указать свойство cursor и для него добавить определенное значение.
Мы создали готовый код ниже для создания трех значений курсора, которые используются чаще всего.
HTML ⤵️
В CSS есть множество разных типов курсоров, и все они созданы с помощью одного свойства cursor. CSS Свойство cursor определяет тип отображаемого курсора при наведении мыши на объект ⬇️
☑️ Указатель мыши на разных элементах выглядит по-разному. При этом, в CSS есть возможность напрямую указать вид курсора. Это можно сделать для любого элемента на странице. Для этого нужно указать свойство cursor и для него добавить определенное значение.
Мы создали готовый код ниже для создания трех значений курсора, которые используются чаще всего.
HTML ⤵️
<button class="progress">progress</button>
<button class="wait">wait</button>
<button class="not-allowed">not-allowed</button>
CSS ⤵️.progress { cursor: progress; }
.wait { cursor: wait; }
.not-allowed { cursor: not-allowed; }
body {
font-family: sans-serif;
margin-top: 100px;
display: flex;
justify-content: center;
}
button {
width: 100px;
height: 35px;
border: 1px solid #eee;
border-radius: 5px;
background-color: #fff;
margin: 0 10px 10px 0;
}
button:hover {
background: #eee;
}
#обучение #html #css