Tag: html

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>
Posted on by — Leave a comment

How to center UL with CSS – HTML

Ever wondered how to center a ul with css in a html page ?

<HTML>
<head>

<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div id="center">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ul>
</div>

</body>

</html>
ul li 
{
	display: inline;

}

li
{
	color: black;
	font-weight: bold;
	font-size: 30px;
}
#center
{
	text-align: center;
}

And the result

Capture