Изменение формы кнопки html/css

-1

Я работаю над проектом html, создавая веб-сайт, и я добавил навигационную панель/меню, создав кнопки для каждого выбора меню.Изменение формы кнопки html/css

Моя кнопка черная, и я хочу, чтобы ее форма стала красной кнопкой. enter image description here

вот мой код CSS, который устанавливает форму моей кнопки:

Игнорирование проблемы colors.My как изменить эту форму, и больше ничего. Есть идеи?

li { 
    display: inline; 
    border: 0px solid #000000; 
    font-family: Futura, Tahoma, sans-serif; 
    color: #ffffff; 
    padding: 25px; 
    border-radius: 1px 1px ; 
    background-color: #cc0323 
}

источник

2014-01-09 HpdsbuΖt

Вы можете легко получить такую информацию в Интернете, если вы смотрите через. Пожалуйста, сделайте некоторое исследование и попробуйте что-то, по крайней мере. Я бы рекомендовал Mozilla Dev. Сеть для ваших фронтовых потребностей. Для Css вы можете посмотреть здесь -> https://developer.mozilla.org/en-US/learn/css –

спасибо. На этот раз я доверял stackoverflow. Но, я сделаю больше поиска! –

От звука этого вопроса, вы хотите изменить форму, не затрагивая текст. Лучший способ достичь этого - это ::before или ::after псевдоэлементы.

li { 
    border: 0px; 
    display: inline-block; 
    position: relative; 
    z-index: 1; 
    border: 0px solid #000000; 
    background-color: transparent; 
    font-family: Futura, Tahoma, sans-serif; 
    color: #ffffff; 
    padding: 25px; 
    margin-left: 20px; 
} 
li::after { 
    content: "'"; 
    color: transparent; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px; 
    z-index: -1; 
    border-radius: 3px; 
    background-color: #cc0323; 
    transform: skew(-30deg); 
-webkit-transform: skew(-30deg); 
-o-transform: skew(-30deg); 
-moz-transform: skew(-30deg); 
-ms-transform: skew(-30deg); 
}

Вот как это выглядит: http://jsbin.com/aCIQupeJ/2

источник

2014-01-09 03:57:06 Zeal

да, оба ответа подходят, но этот, с текстом normal и фигурами, как я их хочу, решил все мои проблемы с текстом. Благодарю. –

ну, прямо сейчас у меня есть код для моих кнопок. Как я могу изменить цвет кнопки, когда я навис над ним? @Zeal –

Использование преобразования: косые на оси х. Ex:

transform: skew(-30deg); 
-webkit-transform: skew(-30deg); 
-ms-transform: skew(-30deg);

должен дать вам о том, что вы хотите. Тем не менее, вы не можете использовать его на встроенных элементов, так что вы должны изменить что (на встроенный блок, может быть):

li { 
    display: inline-block; 
    border: 0px solid #000000; 
    font-family: Futura, Tahoma, sans-serif; 
    color: #ffffff; 
    padding: 25px; 
    border-radius: 1px 1px ; 
    background-color: #cc0323 
    transform: skew(-30deg); 
    -webkit-transform: skew(-30deg); 
    -ms-transform: skew(-30deg); 
}

DEMO

источник

2014-01-09 03:22:26 Cilan

спасибо за ответ. Но я могу понять, где использовать ваши команды. Скопируйте и вставьте их в мой существующий код css? –

@ HpdsbuΖt В CSS – Cilan

Я просто копирую и вставляю в существующий код css? –

Изменение формы кнопки html/css

ответ

Смежные вопросы