Wordpress Sosyal Medya Paylaş Butonları.

<div class="sharinger">
    <a href="" class="trwp-share-facebook">
    <i class="fa fa-facebook-f"></i><span>Facebook'ta Paylaş</span>
    </a>
    <a href="" class="trwp-share-twitter">
    <span><i class="fa fa-twitter"></i>Twitter'da Paylaş</span>
    </a>
    <a href="" class="trwp-share-pinterest">
    <span><i class="fa fa-pinterest-p"></i>Pinterest'te Paylaş</span>
    </a>
    <a href="" class="trwp-share-email">
    <span><i class="fa fa-envelope-o"></i>E-posta İle Gönder</span>
    </a>
    <a href="" class="trwp-share-whatsapp">
    <span><i class="fa fa-whatsapp"></i>WhatsApp İle Gönder</span>
    </a>
</div>

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600&display=swap');
* {
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
    text-decoration: none;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

:focus {
    outline: 0
}

body {
    font-family: 'Mulish', sans-serif
}

.sharinger {
  margin: 10px;
  display: inline-grid;
}

.sharinger a {
    color: #fff;
    float: left;
    width: 100%;
    display: block;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    line-height: 48px;
    font-size: 14px;
    transition: 300ms all;
  margin:5px
}

.sharinger a i {
    float: left;
    width: 50px;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    margin: 0 20px 0 0;
    background: rgba(0, 0, 0, 0.10);
}

.sharinger span {
    overflow: hidden;
}

.sharinger a.trwp-share-facebook {
    background: #3b5999;
}

.sharinger a.trwp-share-twitter {
    background: #40bff5;
}

.sharinger a.trwp-share-pinterest {
    background: #e03f45;
}

.sharinger a.trwp-share-email {
    background: #919191;
}

.sharinger a.trwp-share-whatsapp {
    background: #4DC247;
}

.sharinger a:hover,
.sharinger a:focus {
    opacity: 0.7;
    transition: 300ms all;
}