LINUX.ORG.RU

Кнопка в стиле Frutiger Aero

 


2

3

Нашел на просторах, немного подредактировал. Может кому пригодится. Ну и можете покритиковать.

CSS

button.aero {
    background-color: #05DE68;
    background: 
        radial-gradient(farthest-corner at bottom center, rgba(255, 255, 255, 0.7), transparent), 
        linear-gradient(to bottom, #04BD59, #05DE68);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    border: 1px solid #05DE68;
    border-radius: 9999px;
    color: rgba(50, 26, 17, 0.8);
    cursor: pointer;
    font-family: "Lucida Grande", "Lucida Sans", sans-serif;
    font-weight: 600;
    margin: 1em 1ex;
    padding: 1ex 1em;
    position: relative;
    text-shadow: 0 2px 0.5em #0003;
    transition: all 300ms;
    min-height: 19px;
    letter-spacing: 1px;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
}

button.aero::after {
    content: "";
    position: absolute;
    top: 4%;
    height: 40%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1));
    border-radius: 9999px;
    transition: background 400ms;
    left: 5px;
    right: 5px;
}

button.aero:hover, button.aero:focus {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}

button.aero:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

HTML

<button class="aero">Button text</button>

★★★

Интересно выглядит, но это ж огромная простыня ради всего лишь кнопки. Ещё небось и проц жрёт этими градиентами.

firkax ★★★★★
()
Ответ на: комментарий от firkax

Ну эту простыню достаточно прописать один раз для всего сайта. А для кнопок разного цвета достаточно переопределить background и border. Мне больше всего нравятся зеленые и синие.

Ну по ощущению не тормозит, кулером не ревет. Градиенты в браузере, я кстати не знаю, на чем считаются. Наверное должны на видеокарте.

Я больше всего офигел с того, что такое можно сделать на чистом CSS, без всяких растров.

damix9 ★★★
() автор топика
Ответ на: комментарий от damix9

На чистом CSS, если поднапрячься, можно много чего интересного сделать.

static_lab ★★★★★
()

button без этой простыни css выглядит куда приличнее

Kolins ★★★
()

Не «живая» кнопка при нажатии. Так более естественно выглядит нажатие:

button.aero:active {
+  transform: translate(0.1rem, 0.1rem);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
nvl ★★★
()
Ответ на: комментарий от nvl

Круто, но по-моему слишком глубоко нажимается кнопка. Вот так получше.

button.aero:active {
    transform: translate(1px, 1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
damix9 ★★★
() автор топика
Последнее исправление: damix9 (всего исправлений: 1)
Ответ на: комментарий от IIIypuk

Кеды мне никогда не нра, чисто по скриншотам.
Никогда не юзал, и не понимал, как этот апологет свистелок можно использовать всерьез.

SerW
()
Ответ на: комментарий от FreeWebber

В Mac OS X у элементов есть рамка толщиной в 1px blue

button.aero {
  border: 1px solid #007;
  border-bottom: 1px solid #444;
}
IIIypuk ★★★
()
Последнее исправление: IIIypuk (всего исправлений: 3)
Ответ на: комментарий от IIIypuk

Я еще раз взглянул на кнопку.
Ну очень сомнительное поделие.
Да, закругленный белый прямоугольник ближе к верху.Хорошо, а что он означает, он – имитация чего?

Белая блямба по центру – имитация чего?
Текст размывается при нажатии - -весьма сомнительно.

В целом ощущение халтурщины и тыжпрограммиотства.

SerW
()
Ответ на: комментарий от SerW

апологет свистелок

Так этим уже давно стал гном.

Ну и не знаю, мне как-то после винды и понравилась вот эта «продвинутость», футуризм. Только кеды у меня грузились через раз и я решил, что это плохая DE.

Да, закругленный белый прямоугольник ближе к верху.Хорошо, а что он означает, он – имитация чего?

Белая блямба по центру – имитация чего? Текст размывается при нажатии - -весьма сомнительно.

Это все имитация объемной кнопки из полупрозначного блестящего материала. Я не вижу никаких прямоугольников, я вижу блик, свет и тень. У меня текст не размывается.

damix9 ★★★
() автор топика

похоже на стразик от анальной пробки

Syncro ★★★★★
()
Для того чтобы оставить комментарий войдите или зарегистрируйтесь.