0

Хочется сделать кнопку на чистом html и css как здесь

Выплывающую тень я сделал, но без понятия как сделать выплывающий контур. Я пытался сделать другую ссылку с абсолютным позиционированием, которая показывалась бы и выплывала из-за кнопки при наведении. Но хотелось бы узнать мнение профессионалов, можно ли реализовать это проще?

3 ответа 3

1

Вариант с выплыванием и заплыванием :)

 

.button {
  position: relative;
  margin: 50px;
  width: 200px;
  height: 50px;
  border: 1px solid green;
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  box-sizing: border-box;
  background: green;

}

.button::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  content: "";
  display: block;
  width: 200px;
  height: 50px;
  border: 1px solid green;
  box-sizing: border-box;
  transform: translateX(0) translateY(0);
  transition: transform 0.5s ease-in-out;
}

.button:hover::before {
  transform: translateX(-5px) translateY(-5px);
  transition: transform 0.5s ease-in-out;
}

.button::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  content: "";
  display: block;
  width: 200px;
  height: 50px;
  background-color: rgba(51, 100, 2, 0.4);
  transform: translateX(0) translateY(0);
  transition: transform 0.5s ease-in-out;
}

.button:hover::after {
  transform: translateX(5px) translateY(5px);
  transition: transform 0.5s ease-in-out;
}
<button class="button">Кнопка</button>

1
  • То, что нужно. Спасибо!
    – GeekBrain
    22 окт 2017 в 5:07
1

#test {
  position: relative;
  width: 200px;
  height: 50px;
  border: 1px solid green;
  margin: 100px;
  background: green;
}

#test::before {
  content: "";
  position: absolute;
  border: 1px solid green;
  width: 200px;
  height: 50px;
  top: -5px;
  left: -5px;
  overflow: hidden;
  opacity: 0;
  transition: .5s;
}

#test:hover::before {
  opacity: 1;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>test</title>
  <link rel="stylesheet" href="D:\test\style\main.css">
  <script src="D:\test\js\adaptiveMenu.js" defer></script>
</head>

<body>
  <div id="testwrap">
    <div id="test">

    </div>
  </div>
</body>

</html>

1
  • Так он просто появляется и исчезает. Нужно, чтобы он выплывал и заплывал обратно
    – GeekBrain
    21 окт 2017 в 19:01
1

Во-первых это все можно сделать тенью, во-вторых могли бы посмотреть на самом сайте академии :)

body {
  padding: 20px;
  background: #ccc;
}

button {
  opacity: 1;
  transition-property: box-shadow;
  will-change: box-shadow;
  transition-timing-function: linear;
  transition-duration: .2s;
  background-color: #4eb543;
  border-color: #4eb543;
  width: 270px;
  padding: .7em .875em;
  font-weight: 500;
  font-size: 22px;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  font: inherit;
  border-radius: 0;
  user-select: none;
  touch-action: manipulation;
  position: relative;
  max-width: 270px;
}

button:hover {
  background-color: #4eb543;
  border-color: #4eb543;
  box-shadow: 5px 5px rgba(78,181,67,.5);
  opacity: 1;
  transition-property: box-shadow;
  will-change: box-shadow;
  transition-timing-function: linear;
  transition-duration: .2s;
}

button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  border: 1px solid #4eb543;
  transform: translate(0,0);
  opacity: 0;
  transition-timing-function: linear;
  transition-duration: .2s;
  transition-property: transform,opacity;
  will-change: transform,opacity;

}

button:hover:before {
  transform: translate(-8px,-8px);
    opacity: 1;
}
<button>Подписаться</button>

3
  • Спасибо огромное :) А на сайте пытался посмотреть, но что-то не зашло
    – GeekBrain
    22 окт 2017 в 4:23
  • Одна проблема - фон на сайте не белый, а картинкой
    – GeekBrain
    22 окт 2017 в 5:07
  • @GeekBrain отредактировал
    – user271410
    22 окт 2017 в 5:32

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.