Блог

Главная - Вопросы по программированию - Кнопка, нажимающая содержимое вниз при наведении курсора

Кнопка, нажимающая содержимое вниз при наведении курсора

#html #css

Вопрос:

Я работаю над веб-сайтом и столкнулся с небольшой проблемой, которую на самом деле не могу решить. В принципе, у меня есть кнопка «Кредиты», которая должна иметь некоторые эффекты, когда пользователь наводит на нее курсор. Однако, если я наведу курсор на кнопку, она переместит все содержимое страницы вниз.

Я пытался решить эту проблему совсем немного, но, к сожалению, не смог найти решение.

HTML:

 lt;h2gt;header 1lt;/h2gt; lt;p style="text-align: center"gt;some textlt;brgt;lt;brgt; lt;a href="/credits"gt;lt;button class="creditsbtn"gt;buttonlt;/buttongt;lt;/agt;lt;/pgt; lt;brgt;lt;hrgt; lt;h2gt;header 2lt;/h2gt; lt;p style="text-align: center"gt;some more textlt;brgt;lt;brgt;lt;/pgt;

CSS:

 .creditsbtn {  font-family: 'Courier New', Courier, monospace;  color: #333;  background: #AB5DFC;  border-radius: 10px;  border: #AB5DFC;  padding-top: 5px;  padding-bottom: 7px;  padding-right: 10px;  padding-left: 10px;  font-size: 20px; }  .creditsbtn:hover {  transform: translateY(-5px);  color: #333;  box-shadow: .0rem .2rem .4rem #777;  border: 5px solid #b16afd;  pointer-events: visible;  position: relative;  z-index: 0;  visibility: visible;  float: none; }

Я уверен, что рано или поздно смогу найти решение, но у меня график, и мне нужно сделать еще кое-что на странице, поэтому мне нужно будет сосредоточиться на этом.

Спасибо за любой ответ!!

 .creditsbtn {  font-family: 'Courier New', Courier, monospace;  color: #333;  background: #AB5DFC;  border-radius: 10px;  border: #AB5DFC;  padding-top: 5px;  padding-bottom: 7px;  padding-right: 10px;  padding-left: 10px;  font-size: 20px; }  .creditsbtn:hover {  transform: translateY(-5px);  color: #333;  box-shadow: .0rem .2rem .4rem #777;  border: 5px solid #b16afd;  pointer-events: visible;  position: relative;  z-index: 0;  visibility: visible;  float: none; } 
 lt;h2gt;header 1lt;/h2gt; lt;p style="text-align: center"gt;some textlt;brgt;lt;brgt; lt;a href="/credits"gt;lt;button class="creditsbtn"gt;buttonlt;/buttongt;lt;/agt;lt;/pgt; lt;brgt;lt;hrgt; lt;h2gt;header 2lt;/h2gt; lt;p style="text-align: center"gt;some more textlt;brgt;lt;brgt;lt;/pgt;

Комментарии:

1. Пожалуйста, удалите границу при наведении .creditsbtn:наведите{граница:5 пикселей сплошная #b16afd;}

2. Возможно, измените border значение на outline , если вы хотите, чтобы кнопка была больше.

3. вы хотите большую кнопку, пожалуйста, добавьте — .creditsbtn {граница: 5 пикселей сплошная #b16afd;}

Ответ №1:

Попробуйте сделать это :

 .creditsbtn {  font-family: 'Courier New', Courier, monospace;  color: #333;  background: #AB5DFC;  border-radius: 10px;  /* line I added */  border: 5px solid transparent;  padding-top: 5px;  padding-bottom: 7px;  padding-right: 10px;  padding-left: 10px;  font-size: 20px;   }  .creditsbtn:hover {  transform: translateY(-5px);  color: #333;  box-shadow: .0rem .2rem .4rem #777;  /* line I added */  border-color:#b16afd;  pointer-events: visible;  position: relative;  z-index: 0;  visibility: visible;  float: none; } 
 lt;h2gt;header 1lt;/h2gt; lt;p style="text-align: center"gt;some textlt;brgt;lt;brgt; lt;a href="/credits"gt;lt;button class="creditsbtn"gt;buttonlt;/buttongt;lt;/agt;lt;/pgt; lt;brgt;lt;hrgt; lt;h2gt;header 2lt;/h2gt; lt;p style="text-align: center"gt;some more textlt;brgt;lt;brgt;lt;/pgt;

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

Ответ №2:

Вместо того, чтобы иметь границу, которая толкает другой контент вниз. У вас может быть сплошная прямоугольная тень того же цвета, что и кнопка. Это увеличит поле при наведении курсора, не влияя на другое содержимое. Затем добавьте вторую прямоугольную тень для эффекта затенения.

 box-shadow: 0px 0px 0px 10px #color, 0px 8px 8px #000;  /* before the comma is your enlarged border but set your color.  After the comma is an actual shadow currently set to black*/
Метки: ,