Осветлить текущий цвет кнопки при наведении курсора с помощью Styled-System (и styled-compoments) - PullRequest
Новая
       18

Осветлить текущий цвет кнопки при наведении курсора с помощью Styled-System (и styled-compoments)

1 голос
/ 23 мая 2019

Я создаю компонент Button с использованием styled-system (with styled-components).

Я хочу создать эффект наведения, который немного осветляет цвет кнопки, независимо от того, что это за цвет.

Например, давайте представим три кнопки - кнопку по умолчанию, основную кнопку и дополнительную кнопку: 

<Button>Default</Button>
<Button bg="primary">Primary</Button>
<Button bg="secondary">Secondary</Button>

И давайте представим, что цвет по умолчанию темно-серый, основной цвет зеленый ивторостепенный цвет - синий.

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

Однако я не могу понять, как это сделать?

Есть идеи?

Ответы [ 3 ]

0 голосов
/ 23 мая 2019

Вы можете изменить непрозрачность элемента 

<!DOCTYPE html>
<html>
<head>
<style>
#green{
background-color:green;
}
.lighten{
opacity:0.6;
}
</style>
</head>
<body>

<button id="green">Green</button>
<script>
var green = document.getElementById("green");
green.onmouseover = function(){
green.classList.add("lighten")
}
green.onmouseleave = function(){
green.classList.remove("lighten")}
</script>
</body>
</html>
0 голосов
/ 23 июля 2019

Рекомендуется использовать вариант buttonStyle в стиле системы.

Для этого требуется добавить системную опору buttonStyle, а затем предоставить buttons масштаб для объекта theme. Обратите внимание, что варианты - это необработанные определения объектов CSS, а не системные реквизиты.

Button.js 

import styled from "styled-components"
import { buttonStyle } from "@styled-system/variant"

export default styled('button')({}, buttonStyle)

theme.js 

export default {
  buttons: {
    primary: {
      backgroundColor: "red",
      '&:hover': {
        backgroundColor: "pink" // use polished `lighten`, etc
      }
    }
  }
}

Использование: Просто укажите variant. 

<Button variant="primary">Primary Button</Button>

Вот демонстрация CodeSandbox: https://codesandbox.io/s/zealous-noether-lxjeu?fontsize=14

0 голосов
/ 23 мая 2019

Вам нужно будет использовать некоторые классы CSS.

Вы можете использовать filter: brightness(150%) или пользовательские осветленные цвета.Но если вы используете препроцессор css, такой как SASS или Less, у вас есть встроенные функции.

Например: 

button {
  background: red;
  color: white;
}

.primary {
  background: green;
}

.secondary {
  background: blue;
}

button:hover {
  filter: brightness(150%);
}
<Button>Default</Button>
<Button class="primary">Primary</Button>
<Button class="secondary">Secondary</Button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...