Hover Glow Buttons

hover-glow-buttons.markdown

Hover Glow Buttons

A Pen by JFarrow on CodePen.

License.

index.html

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
  <div class="zcontainer">
    <ul id="buttonList">
      <li><a href="#" title="Post Surveying Stuff" onclick="openModal('modal1')"><i class="fa fa-arrows" aria-hidden="true"></i></a></li>
      <li><a href="#" title="Land Surveyor Atlas" onclick="openModal('modal2')"><i class="fa fa-map" aria-hidden="true"></i></a></li>
      <li><a href="#" title="Land Surveyor Globe" onclick="openModal('modal3')"><i class="fa fa-globe" aria-hidden="true"></i></a></li>
      <li><a href="#" title="Land Surveyors United Feeds" onclick="openModal('modal4')"><i class="fa fa-rss" aria-hidden="true"></i></a></li>
      <li><a href="#" title="Your Profile on Land Surveyors United" onclick="openModal('modal5')"><i class="fa fa-user" aria-hidden="true"></i></a></li>
    </ul>
  </div>
</div>

<!-- Modal 1 -->
<div id="modal1" class="modal">
  <iframe src="/news" frameborder="0"></iframe>
  <span class="close" onclick="closeModal('modal1')">&times;</span>
</div>

<!-- Modal 2 -->
<div id="modal2" class="modal">
  <iframe src="/post-point" frameborder="0"></iframe>
  <span class="close" onclick="closeModal('modal2')">&times;</span>
</div>

<!-- Modal 3 -->
<div id="modal3" class="modal">
  <iframe src="/hubsmap" frameborder="0"></iframe>
  <span class="close" onclick="closeModal('modal3')">&times;</span>
</div>

<!-- Modal 4 -->
<div id="modal4" class="modal">
  <iframe src="https://landsurveyorsuniteddocs.on.drv.tw/membertools/opml/supermarketjobs.html" frameborder="0"></iframe>
  <span class="close" onclick="closeModal('modal4')">&times;</span>
</div>

<!-- Modal 5 -->
<div id="modal5" class="modal">
  <iframe src="/addstuff" frameborder="0"></iframe>
  <span class="close" onclick="closeModal('modal5')">&times;</span>
</div>

script.js

function openModal(modalId) {
  document.getElementById(modalId).style.display = "block";
  document.getElementById('buttonList').style.top = "0";
}

function closeModal(modalId) {
  document.getElementById(modalId).style.display = "none";
}

// Close modal when clicking outside of it
window.onclick = function(event) {
  if (event.target.classList.contains('modal')) {
    event.target.style.display = "none";
  }
}

style.css

body {
  margin:0;
  padding:0;
  background: #111827;
}

ul#buttonList {
  margin:0;
  padding:0;
  display:flex;
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
}

ul#buttonList li {
  list-style:none;
  margin: 0 15px;
}

ul#buttonList li a {
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  background: #171515;
  border-radius: 50%;
  font-size: 30px;
  color: #666;
  transition: .5s;
}

ul#buttonList li a:before {
  content: '';
  position: absolute;
  top:20;
  left:0;
  width:100%;
  height:100%;
  border-radius:50%;
  background: #d35400;
  transition: .5s;
  transform: scale(.9);
  z-index: -1;
}

ul#buttonList li a:hover:before {
  transform: scale(1.2);
  box-shadow: 0 0 15px #d35400;
  filter: blur(3px);
}

ul#buttonList li a:hover {
  color: #ffa502;
  box-shadow: 0 0 15px #d35400;
  text-shadow: 0 0 15px #d35400;
}
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

.modal iframe {
  width: 100%;
  height: 100%;
}

.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.zcontainer ul {
  position: fixed;
  top: 30px!important;
  z-index: 1001;
  transition: top 0.5s ease;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />