I am currently working on creating an action floating button using the Ionic framework. While I have successfully created a basic button, I am now looking to add some stylish effects and make additional buttons appear upon interaction. I understand that this can easily be achieved using ionic-material, but I prefer to accomplish this task using AngularJS, Ionic, and CSS only.
HTML
<div class="float-button">
<span class="height-fix">
<a class="content" ui-sref="home">
<i class="ion-ios-home"> </i>
</a>
</span>
</div>
CSS
.float-button {
background-color: $heading-color;
opacity: 0.9;
color: white;
border-radius: 50%;
/*border-radius:15% 0 0 0;*/
width: 30px;
padding: 25px;
font-size: 30px;
position: fixed;
bottom: 10%; /* Adjust height */
right: 5%; /* Adjust position */
z-index: 1000;
}
.float-button .height_fix {
margin-top: 100%;
border: 1px solid red;
}
.float-button .content {
position: absolute;
left: 0;
top: 50%;
height: 100%;
width: 100%;
text-align: center;
margin-top: -20px;
color: $app-background-color;
}