КНОПКИ С ЭФФЕКТОМ ПРИ НАВЕДЕНИИ КУРСОРА НА CSS3
Опубликовано 09.12.2017 в 00:50
Интересный вид эффекта при наведении курсора мыши на кнопку, который был создан на чистом CSS3. Считаю, что данная реализация должна попасть к вам в коллекцию, а затем применяться в ваших проектах. Данный пак содержит 5 видов эффектов. Были использованы шрифтовые иконки FontAwesome, а это говорит о том, что это самая большая на сегодняшний день библиотека шрифтовых иконок. Соответственно вы сможете применить нужные вам иконки.
Теперь давайте разберем все более подробнее.
Для начала вам нужно подключить библиотеку иконочных шрифтов (FontAwesome)
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
Теперь вам нужно определится, какой именно эффект вы хотите использовать. Ниже указан HTML и CSS код для каждого эффекта отдельно.
Кликните по изображению, чтобы посмотреть эффект.
Эффект #1
HTML
<div class="button-effect">
<h2>Эффект #1</h2>
<a class="effect effect-1" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-1" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-1" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-1" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-1" href="#" title="Подробнее">Подробнее</a>
</div>
CSS
.effect.effect-1 {
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.effect.effect-1:before {
content: "\f178";
font-family: FontAwesome;
font-size: 15px;
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
right: 0;
top: 0;
opacity: 0;
height: 100%;
width: 40px;
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.effect.effect-1:hover {
text-indent: -20px;
}
.effect.effect-1:hover:before {
opacity: 1;
text-indent: 0px;
}
Эффект #2
HTML
<div class="button-effect">
<h2>Эффект #2</h2>
<a class="effect effect-2" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-2" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-2" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-2" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-2" href="#" title="Подробнее">Подробнее</a>
</div>
CSS
.effect.effect-2:before {
content: "\f0a4";
font-family: FontAwesome;
font-size: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 0;
right: -30px;
width: 30px;
height: 100%;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 0px 6px 6px 0px;
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
text-align: center;
}
.effect.effect-2:hover {
text-indent: -30px;
}
.effect.effect-2:hover:before {
right: 0;
text-indent: 0px;
}
Эффект #3
HTML
<div class="button-effect">
<h2>Эффект #3</h2>
<a class="effect effect-3" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-3" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-3" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-3" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-3" href="#" title="Подробнее">Подробнее</a>
</div>
CSS
.effect.effect-3 {
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.effect.effect-3:before {
content: "\f178";
font-family: FontAwesome;
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 100%;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.effect.effect-3:hover {
text-indent: -9999px;
}
.effect.effect-3:hover:before {
top: 0;
text-indent: 0;
}
Эффект #4
HTML
<div class="button-effect">
<h2>Эффект #4</h2>
<a class="effect effect-4" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-4" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-4" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-4" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-4" href="#" title="Подробнее">Подробнее</a>
</div>
CSS
.effect.effect-4 {
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.effect.effect-4:before {
content: "\f178";
font-family: FontAwesome;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.effect.effect-4:hover {
text-indent: -9999px;
}
.effect.effect-4:hover:before {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
text-indent: 0;
}
Эффект #5
HTML
<div class="button-effect">
<h2>Эффект #5</h2>
<a class="effect effect-5" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-5" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-5" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-5" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-5" href="#" title="Подробнее">Подробнее</a>
</div>
CSS
.effect.effect-5 {
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.effect.effect-5:before {
content: "\f054";
font-family: FontAwesome;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
height: 100%;
width: 30px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 0 50% 50% 0;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.effect.effect-5:hover {
text-indent: 30px;
}
.effect.effect-5:hover:before {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
text-indent: 0;
}
Мне нравится (6)
Теперь давайте разберем все более подробнее.
Для начала вам нужно подключить библиотеку иконочных шрифтов (FontAwesome)
Код
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
Теперь вам нужно определится, какой именно эффект вы хотите использовать. Ниже указан HTML и CSS код для каждого эффекта отдельно.
Кликните по изображению, чтобы посмотреть эффект.
Эффект #1
HTML
Код
<div class="button-effect">
<h2>Эффект #1</h2>
<a class="effect effect-1" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-1" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-1" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-1" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-1" href="#" title="Подробнее">Подробнее</a>
</div>
CSS
Код
.effect.effect-1 {
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.effect.effect-1:before {
content: "\f178";
font-family: FontAwesome;
font-size: 15px;
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
right: 0;
top: 0;
opacity: 0;
height: 100%;
width: 40px;
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.effect.effect-1:hover {
text-indent: -20px;
}
.effect.effect-1:hover:before {
opacity: 1;
text-indent: 0px;
}
Эффект #2
HTML
Код
<div class="button-effect">
<h2>Эффект #2</h2>
<a class="effect effect-2" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-2" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-2" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-2" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-2" href="#" title="Подробнее">Подробнее</a>
</div>
CSS
Код
.effect.effect-2:before {
content: "\f0a4";
font-family: FontAwesome;
font-size: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 0;
right: -30px;
width: 30px;
height: 100%;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 0px 6px 6px 0px;
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
text-align: center;
}
.effect.effect-2:hover {
text-indent: -30px;
}
.effect.effect-2:hover:before {
right: 0;
text-indent: 0px;
}
Эффект #3
HTML
Код
<div class="button-effect">
<h2>Эффект #3</h2>
<a class="effect effect-3" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-3" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-3" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-3" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-3" href="#" title="Подробнее">Подробнее</a>
</div>
CSS
Код
.effect.effect-3 {
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.effect.effect-3:before {
content: "\f178";
font-family: FontAwesome;
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 100%;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.effect.effect-3:hover {
text-indent: -9999px;
}
.effect.effect-3:hover:before {
top: 0;
text-indent: 0;
}
Эффект #4
HTML
Код
<div class="button-effect">
<h2>Эффект #4</h2>
<a class="effect effect-4" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-4" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-4" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-4" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-4" href="#" title="Подробнее">Подробнее</a>
</div>
CSS
Код
.effect.effect-4 {
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.effect.effect-4:before {
content: "\f178";
font-family: FontAwesome;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.effect.effect-4:hover {
text-indent: -9999px;
}
.effect.effect-4:hover:before {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
text-indent: 0;
}
Эффект #5
HTML
Код
<div class="button-effect">
<h2>Эффект #5</h2>
<a class="effect effect-5" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-5" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-5" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-5" href="#" title="Подробнее">Подробнее</a>
<a class="effect effect-5" href="#" title="Подробнее">Подробнее</a>
</div>
CSS
Код
.effect.effect-5 {
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.effect.effect-5:before {
content: "\f054";
font-family: FontAwesome;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
height: 100%;
width: 30px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 0 50% 50% 0;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.effect.effect-5:hover {
text-indent: 30px;
}
.effect.effect-5:hover:before {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
text-indent: 0;
}