Изменение цвета текста кнопки при наведении курсора после выбора класса - PullRequest
Новая
       22

Изменение цвета текста кнопки при наведении курсора после выбора класса

0 голосов
/ 02 октября 2018

Я пробую новые эффекты при наведении на кнопку, но у меня возникают проблемы с настройкой цвета текста кнопки.Вот мой код: 

    .color-1 {
	    text-align: center;
	    background: white;
    }

    .myButton {	
	    cursor: pointer;
	    padding:  25px 80px;
	    margin: 15px 30px;
	    text-transform: uppercase;
	    font-weight:  bold;
	    outline: none;	
     	position: relative;
	    -webkit-transition: all 0.3s;
	    -moz-transition: all 0.3s;
	    transition: all 0.3s; 
	    overflow: hidden;
	    border-radius:  12px;
	    border: 2px solid blue;
	    background:  blue;
	    color: white;
    }

    .myButton::after {
	    background-color: white;
	    content: '';
	    position: absolute;
	    -webkit-transition: all 0.3s;
	    -moz-transition: all 0.3s;
	    transition: all 0.3s;
	    width: 100%;
	    height: 0;
	    /* z-index: -1; */
	    top: 50%;
	    left: 50%;	
	    opacity: 0;
	    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	    -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	    -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	    transform: translateX(-50%) translateY(-50%) rotate(45deg);		
    }

    .myButton:hover,
    .myButton:active {
        color: black;
    }

    .myButton:hover::after {
	    height: 260%;
	    opacity: 1;
     }

    .myButton:active::after {
	    height: 400%;
	    opacity: 0;
    }
   <div class="color-1">				
	    <button class="btn myButton"><span class="test">Button 2</span></button>				
	</div>

Однако, когда вы наводите курсор на кнопку, цвет текста не устанавливается должным образом, и я считаю, потому что я устанавливаю атрибут непрозрачности в '.myButton:hover :: after 'to 1. Я попытался установить его на 0,75 для целей тестирования и, по-видимому, он исчезает.

Может кто-нибудь помочь мне, как я могу установить черный цвет текста кнопки при наведении на нее, не исчезая?

Заранее спасибо,

Роберт

1 Ответ

0 голосов
/ 02 октября 2018

Использование z-index

z-index: -1; до .myButton:hover::after и 

    .myButton:hover,
        .myButton:active {
            color: black;
            position: relative;
            z-index: 2;
}

См. Код: 

   .color-1 {
	    text-align: center;
	    background: white;
    }

    .myButton {	
	    cursor: pointer;
	    padding:  25px 80px;
	    margin: 15px 30px;
	    text-transform: uppercase;
	    font-weight:  bold;
	    outline: none;	
     	position: relative;
	    -webkit-transition: all 0.3s;
	    -moz-transition: all 0.3s;
	    transition: all 0.3s; 
	    overflow: hidden;
	    border-radius:  12px;
	    border: 2px solid blue;
	    background:  blue;
	    color: white;
    }

    .myButton::after {
	    background-color: white;
	    content: '';
	    position: absolute;
	    -webkit-transition: all 0.3s;
	    -moz-transition: all 0.3s;
	    transition: all 0.3s;
	    width: 100%;
	    height: 0;
	    /* z-index: -1; */
	    top: 50%;
	    left: 50%;	
	    opacity: 0;
	    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	    -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	    -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	    transform: translateX(-50%) translateY(-50%) rotate(45deg);		
    }

    .myButton:hover,
    .myButton:active {
        color: black;
            position: relative;
    z-index: 2;
    }

    .myButton:hover::after {
	    height: 260%;
	    opacity: 1;
      z-index: -1;
     }

    .myButton:active::after {
	    height: 400%;
	    opacity: 0;
    }
   <div class="color-1">				
	    <button class="btn myButton"><span class="test">Button 2</span></button>				
	</div>
...