Question

Здравствуйте. у меня есть кнопка "заказать" и после наведение мыши  оно открывается и под ним ссылки моих социальных аккаунтов.

как заменить наведение мыши на клик?  хочу чтобы она открывалась после клика.

css кнопки:
 

body{
 margin: 0;
 padding: 0;
 background: #e;
 font-family: "Arial";
}

.share{
 width: 200px;
 height: 100px;
 margin: 5em auto;
 background: #D7B3D7;
 text-align: center;
 border-radius: 100px;
 overflow: hidden;
 position: relative;
}

.share a{
 display: inline-block;
 width: 100px;
 height: 100px;
 float: left;
 position: relative;
 text-indent: -9999px;
 z-index: 9999;
}

.share:after{
 content: "Պատվիրել";
 position: absolute;
 left: 0;
 right: 0;
 top: 30%;
 font-size: 25px;
 font-weight: normal;
 font-style: italic;
 text-transform: uppercase;
 color: #FFF; 
}

.share a.fb{
 background: #3c5b9b url(https://cdn1.iconfinder.com/data/icons/social-media-icons-2/83/facebook_64x83.png) no-repeat center;
 top: -200px;
 transition: all 0.3s ease-in-out;
}

.share a.tw{
 background: #bc2a8d url(https://porc1.ucoz.net/vvv.png) no-repeat center;
 bottom: -200px;
 transition: all 0.3s ease-in-out;
}

.share:hover a.fb{
 top: 0;
}

.share:hover a.tw{
 bottom: 0;
}

страница кнопки:

https://ripssweet.com/photo/cakes/mijuk/mijowky_elak_banan/16-0-114

заранее огромное спасибо.

Answer 1

Чтобы было по клику, вам вообще нужно убрать этот эффект наведения. Текущие стили с примера выше заменить на:

.share{
 width: 200px;
 height: 100px;
 margin: 5em auto;
 background: #D7B3D7;
 text-align: center;
 border-radius: 100px;
 /* overflow: hidden; */
 position: relative;
}

.share a{
 display: inline-block;
 width: 100px;
 height: 100px;
 float: left;
 position: relative;
 text-indent: -9999px;
 z-index: 9999;
}

.share:after{
 content: "ÕŠÕ¡Õ¿Õ¾Õ«Ö€Õ¥Õ¬";
 position: absolute;
 left: 0;
 right: 0;
 top: 30%;
 font-size: 25px;
 font-weight: normal;
 font-style: italic;
 text-transform: uppercase;
 color: #FFF; 
}

.share a.fb{
 background: #3c5b9b url(https://cdn1.iconfinder.com/data/icons/social-media-icons-2/83/facebook_64x83.png) no-repeat center;
 /* top: -200px; */
 transition: all 0.3s ease-in-out;
}

.share a.tw{
 background: #bc2a8d url(https://porc1.ucoz.net/vvv.png) no-repeat center;
 /* bottom: -200px; */
 transition: all 0.3s ease-in-out;
}

.share:hover a.fb{
 top: 0;
}

.share:hover a.tw{
 bottom: 0;
}

Comments

Hе получилось. Kнопка "заказать" пропала, остались только иконки соц сетей, которые находились под кнопкой

---

Rippi Sargsyan,

Чтобы было все вместе, добавляйте кнопку заказать отдельно и кнопки соц-сетей, а не так как сейчас.

---

Yuri_Geruk,

Спасибо