Material Temalı Butonda Yazı Sorunu

TheLastRevolution

yukarıdaki resimde gördüğünüz butonda yazan deneme yazısını butonun ortasına yerleştirmeye çalışıyorum ama bir türlü olmuyor yardım edebilecek olan var mı buyrun bunlarda kaynak kodları;

BUTON KODU ( .CSS DOSYASI )

HTML:

body{
margin:0;
padding:0;
}



.wrapper:after {
    content:"";
    display:table;
    clear:both;
}

.ripplelink{
  display:block;
  width:49.6%;
  margin:0.2%;
  height:10em;
  text-align: center;
  color:#fff;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  z-index:0;
  background: #0c5e58;
}

.ripplelink:hover{
    z-index:1000;
  box-shadow:rgba(0, 0, 0, 0.3) 0 16px 16px 0;
  -webkit-box-shadow:rgba(0, 0, 0, 0.3) 0 16px 16px 0;
  -moz-box-shadow:rgba(0, 0, 0, 0.3) 0 16px 16px 0;
  text-shadow: 3px 3px 1px #000;
  color: yellow;
  text-decoration:none;
}

.ink {
  display: block;
  position: absolute;
  background:rgba(255, 255, 255, 0.3);
  border-radius: 100%;
  -webkit-transform:scale(0);
     -moz-transform:scale(0);
       -o-transform:scale(0);
          transform:scale(0);
}

.animate {
    -webkit-animation:ripple 0.65s linear;
   -moz-animation:ripple 0.65s linear;
    -ms-animation:ripple 0.65s linear;
     -o-animation:ripple 0.65s linear;
        animation:ripple 0.65s linear;
}

@-webkit-keyframes ripple {
    100% {opacity: 0; -webkit-transform: scale(2.5);}
}
@-moz-keyframes ripple {
    100% {opacity: 0; -moz-transform: scale(2.5);}
}
@-o-keyframes ripple {
    100% {opacity: 0; -o-transform: scale(2.5);}
}
@keyframes ripple {
    100% {opacity: 0; transform: scale(2.5);}
}


.cyan{
  background:#00bcd4;
}

.lightgreen{
  background:#8bc34a;
}

.amber{
  background:#ffc107;
}

.orange{
  background:#ff9800;
}

SAYFANIN KODU ( .HTML DOSYASI ) ;

HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="button.css" type="text/css">
<link rel="stylesheet" href="font.css" type="text/css">
<script type="text/javascript" src="buttoneffect.js"></script>

<BODY>

<a href="mcpe.html" style="text-decoration:none;">
<span class="ripplelink" style="width: 15%; height: 10%; font-family: minecraftiaregular;">DENEME</span>
</a>

</BODY>

arkadaslar yardimci olabilecek yok mu bi.uygulama yapmaya calisiyoruz ama burada takildik...

Material Temalı Butonda Yazı Sorunu

TheLastRevolution