Переключение между различными типами кнопок
Поэтому я использовал codepen для внедрения кнопок на мою домашнюю страницу здесь. Кнопки работают, но проблема теперь в кнопке ToDo (+) справа, а кнопка ToDo (x), которая появляется после добавления, также имеет эффект button ToDo(+). В частности, при наведении на них с противоположных концов отходят две параллельные линии. Как их отделить друг от друга, чтобы одно не влияло на другое? Конкретный код CSS находится здесь:
button{
background:#00000088;
color:#fff;
border:none;
position:relative;
height:40px;
font-size:1.2em;
padding:0 1em;
cursor:pointer;
margin: 0 0.25em;
transition:800ms ease all;
outline:none;
}
button:hover{
background:#ffffff;
color:#000;
}
button:before,button:after{
content:'';
position:absolute;
top:0;
right:0;
height:3px;
width:0;
background: #bd818d;
transition:400ms ease all;
}
button:after{
right: inherit;
top: 47px;
left: -5px;
bottom: 0;
}
button:hover:before,button:hover:after{
width:100%;
transition:800ms ease all;
}
@Roope Ссылка на сайт должна быть там, она немного длиннее MVE, но я редактирую вопрос, чтобы добавить ее сейчас.
Добавьте ClassNames на свои кнопки, чтобы знать, как стилизовать каждую из них по-разному. ко всему остальному, что является общим между этими кнопками, можно получить доступ с помощью кнопки {}
Это совсем не круто. Пожалуйста, посетите www.w3schools.com и прочитайте их HTML-элементы и атрибуты.
Ответы 2
Вместо того, чтобы применять стили к button, вы можете использовать имена классов, чтобы присвоить определенные стили отдельным кнопкам.
Имя класса, содержащее общие стили, может быть присвоено обоим, а конкретные могут быть в соответствующих именах классов.
Вот где проблема:
button{ /* YourStyle */}
Это говорит вашему браузеру, что он должен применять YourStyle выше везде, где он видит элемент кнопки. И ваш браузер остается верным и подчиняется вашим инструкциям. Чтобы решить эту проблему, вы должны дать button имена, которые ее определяют.
Пример:
<button class='todo add'></button>
<button class='todo close'></button>
Ссылка на эти кнопки с помощью css:
/* When you want to reference all buttons */
button{} or .todo{}
/* When you wish to target the todo add only */
.todo.add{} or .add{}
/* When you wish to target the todo close only */
.todo.close{} or .close{}
попробуйте дать своим кнопкам имена классов или идентификатор и ссылаться на них из стилей css.
Понял, добавил .link после всех кнопок, затем class = "link" у кнопок и это их разделило, спасибо!
Поймите, что код CSS без HTML не имеет никакого смысла. Пожалуйста, включите в вопрос весь минимальный пример, включая HTML.