html — свойство CSS при наведении на кнопку не работает после добавления кода PHP

Я добавил эффект наведения на кнопку. Эффект кода работал отлично, пока я не добавил немного кода PHP внутри своей страницы. Все, кроме эффекта наведения, работает нормально. Он пытался понять проблему с помощью консоли, но не получил подсказки.
Вот мой код:

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;
}

Вот код внутри моего тела:

<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>

Код ниже элемента div с идентификатором ‘second-content’ также работает нормально. Что я здесь не так делаю?