CSS hover property on button not working after adding PHP code - php

Question

I added a hover effect on a button. The code effect worked perfectly until I added some PHP code inside my page. Everything except the hover effect is working fine. It tried to understand the problem by using console but got no hint.
Here's my code:
CSS:
#secondary-content
{
position: relative;
top: 100vh;
}
#write-blog
{
position: relative;
top: -50%;
z-index: 3;
}
.ghost-button
{
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
}
.ghost-button:hover, .ghost-button:active
{
background-color: #fff;
color: #000;
transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
Here's the code inside my body:
<div class="slider fullscreen" data-indicators="false">
<ul class="slides">
<li>
<img src="Includes/images/map2.jpg">
<div class="caption left-align">
<h3 class="light white-text">History doesn't repeats itself,<br>but it does rhyme.</h3>
</div>
</li>
<li>
<div class="caption right-align">
<h1 class="light white-text">First solve the problem.<br>Then, write the code.</h1>
</div>
<img src="Includes/images/sublime_text.jpeg"> <!-- random image -->
</li>
<li>
<div class="caption center-align">
<h4 class="light white-text">Art speaks where words are unable to explain.</h4>
</div>
<img src="Includes/images/art1.jpg">
</li>
<li>
<img src="Includes/images/music2.jpg">
<div class="caption right-align">
<h5 class="light grey-text text-lighten-3">Where words fail, Music speaks.</h5>
</div>
</li>
<li>
<div class="caption left-align">
<h4 class="light white-text">Science is the poetry of<br>reality.</h4>
</div>
<img src="Includes/images/science.jpg"> <!-- random image -->
</li>
</ul>
<div id="write-blog" class="center-align">
<a class="ghost-button" href="">WRITE A BLOG</a>
</div>
</div>
<div id="secondary-content">
<div class="container">
<?php
$blog = DB::getInstance()->get('blogs', array('deletion_status', '=', '0'));
if($blogs = $blog->fetchRecords(2))
{
foreach($blogs as $blog)
{
$date=strtotime($blog->created_on); // changing the format of timestamp fetched from the database, converting it to milliseconds
echo
"<div class='section'>
<div class='row'>
<div class='col s2'>
<blockquote>".
date('M', $date)."<br>".
date('Y d', $date).
"</blockquote>
</div>
<div class='col s8'>
<h5>".ucfirst($blog->title)."</h5>
<h6>".ucfirst($blog->description)."</h6><br>
<div class='row'>
<div class='col s1'>
<i class='material-icons' style='color:grey'>remove_red_eye</i>
</div>
<div class='col s1'>
{$blog->views}
</div>
<div class='col s1 offset-s2'>
<i class='material-icons' style='color:grey'>thumb_up</i>
</div>
<div class='col s1'>
{$blog->likes}
</div>
<div class='col s1 offset-s2'>
<i class='material-icons' style='color:grey'>thumb_down</i>
</div>
<div class='col s1'>
{$blog->dislikes}
</div>
</div>
<div class='divider'></div>
</div>
</div>
</div>";
}
}
?>
</div>
<script src="Includes/js/jquery.min.js"></script>
<script type="text/javascript" src="Includes/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('.slider').slider();
});
</script>
The code below the div having id 'secondary-content' is also working fine. What wrong am I doing here?