Tag: without plugin

Posted on by — Leave a comment

Create a wordpress floating button with html and css

In this guide I will explain how you can create a wordpress floating button with plain css and html without using a plugin.

As you can see, I have added as a floating button my Udemy course regarding Azure DevOps and can be found on the right bottom corner.

In order to create such a button you will need to add a new Widget and select custom html.

Then you can paste the below code after modifying it for your case.

<div class="sticky-slider">
<a href="https://www.udemy.com/course/mastering-azure-devops-cicd-pipelines-with-yaml/" class="navi">Check out my Azure DevOps Udemy course</a>
</div>

<style>
	.navi, .navi:visited, .navi:active, .navi:hover {
  border:none !important;
  outline:none !important;
  text-decoration:none !important;
  color:#fff !important;
  -webkit-tap-highlight-color: white;
}
  
.sticky-slider {
  position: fixed;
  bottom: 0.5rem;
  border: none;
  border-radius: 30px;
  background-color: #a435f0;
  color: #fff;
  z-index: 10000;
  padding: 0.7rem 1.2rem;
  margin: 1rem 0;
  right: 1rem;
  font-size: 1rem;
  font-family: Calibri
  }
</style>