Merhaba,
Bu yazımda sizlere daha önce bir projemde kullanmış olduğum “Hemen Ara” butonunu paylaşacağım. Hemen Ara butonu sadece CSS ve HTML kodları ile yapılmıştır.
Örnek : https://www.bugrasezer.com/dosyalar/hemenara/hemen-ara.html
İlk olarak HTML kodlarımızı oluşturalım.
‘
<div class=”contact”>
<div class=”phone”>
<a href=”tel:05535340328″ title=”Hemen Ara”><img src=”#” alt=”Hemen Ara” draggable=”true” data-bukket-ext-bukket-draggable=”true”></a>
<span>0</span>
<span>5</span>
<span>5</span>
<span>3</span>
<span><strong>5</strong></span>
<span><strong>3</strong></span>
<span><strong>4</strong></span>
<span><strong>0</strong></span>
<span><strong>3</strong></span>
<span><strong>2</strong></span>
<span><strong>8</strong></span></div><div class=”contact-button”>
<span><strong>Hemen Ara <i class=”fa fa-hand-pointer-o” aria-hidden=”true”></i></strong></span>
<a href=”tel:+905535340328″ title=”Hemen Ara”></a></div></div>
‘
CSS kodlaması;
‘
.phone{position:relative;top:-48px;left:-12px}.phone>a{position:absolute;visibility:hidden}.phone span{font-size:22px;color:#0c5e9e;position:absolute;z-index:9}.phone span strong{font-weight:700;font-size:28px}.phone span:nth-child(2){left:2px;transform:rotate(-45deg);bottom:-56px}.phone span:nth-child(3){left:11px;transform:rotate(-45deg);bottom:-46px}.phone span:nth-child(4){left:19px;transform:rotate(-38deg);bottom:-39px}.phone span:nth-child(5){left:28px;transform:rotate(-37deg);bottom:-32px}.phone span:nth-child(6){left:45px;transform:rotate(-15deg);bottom:-27px}.phone span:nth-child(7){left:60px;transform:rotate(-5deg);bottom:-24px}.phone span:nth-child(8){left:76px;transform:rotate(5deg);bottom:-24px}.phone span:nth-child(9){left:99px;transform:rotate(15deg);bottom:-28px}.phone span:nth-child(10){left:114px;transform:rotate(25deg);bottom:-34px}.phone span:nth-child(11){transform:rotate(35deg);left:127px;bottom:-43px}.phone span:nth-child(12){left:138px;transform:rotate(50deg);bottom:-54px}.contact{position:fixed;left:2%;bottom:15%;z-index:9999}.contact-button{position:relative;width:130px;height:130px;border-radius:100%;-webkit-transition:all 250ms;-o-transition:all 250ms;transition:all 250ms;background:#0c5e9e;border:6px solid #004880 }.contact-button span{font-size:18px;color:#fff;font-weight:400;display:block;text-align:center;position:absolute;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);line-height:24px;width:100%;text-align:center}.contact-button span strong{font-weight:700}.contact-button a{position:absolute;left:0;top:0;width:100%;height:100%}.contact-button:before{content:”;position:absolute;top:-10px;left:-10px;width:100%;height:100%;border:10px solid transparent;border-radius:100%;animation:scale 3s infinite;-webkit-transition:all 250ms;-o-transition:all 250ms;transition:all 250ms}
@media screen and (max-width: 991px){.contact{left:0;right:0;width:50%;bottom:15%}.contact .phone{display:none}.contact .contact-button{border-radius:0;width:100%;height:50px}}
‘
Hepsi bu kadar.Kendi projelerinize uyarlayıp, müşterilerinize sunabilirsiniz..
Umarım işinize yarar.
Sorularınız veya yorumlarınız için aşağıda ki yorum alanlarını kullanabilirsiniz.
Teşekkürler.
Saygılarımla,
Mehmet Buğra Sezer