Overlapping Navigation Buttons of Different Shapes

以下代碼在：http://dojo.telerik.com/上運行

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/button/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>


<div id="rectangleButton" class="rectangle">
    Retangle
    <br/>

    <div style="width:100%;height:220px;border:1px dotted white;text-align:center">
      <span class="k-i-drag-and-drop" style="font-size:30px;top:100px;"></span>
      <span class="k-i-drag-and-drop" style="font-size:30px;top:100px;"></span>
      <span class="k-i-drag-and-drop" style="font-size:30px;top:100px;"></span>
    </div>



</div>
<button id="rectangleButton2" class="rectangle rectangle2">Retangle</button>
<button id="rectangleButton3" class="rectangle rectangle3">Retangle</button>
<div id="rectangle4" class="rectangle rectangle4"></div>
<button id="primaryTextButton" class=" circle">Circle</button>
<button id="primaryTextButton2" class=" circle circle2">Circle</button>

<script>
$(document).ready(function () {
    $("#primaryTextButton").kendoButton({
       click: onClick
      //spriteCssClass: "k-icon k-i-plus"
    });
    $("#rectangleButton").kendoButton({
       click: onClick2
      //spriteCssClass: "k-icon k-i-plus"
    });
    $("#rectangleButton2").kendoButton({
       click: onClick3
      //spriteCssClass: "k-icon k-i-plus"
    });
    $("#rectangleButton3").kendoButton({

       click: onClick3
      //spriteCssClass: "k-icon k-i-plus"
    });
    $("#primaryTextButton2").kendoButton({

       click: onClick
      //spriteCssClass: "k-icon k-i-plus"
    });
});
function onClick(e) {
     alert("click");
}
function onClick2(e) {
     alert("retangle");
}
function onClick3(e) {
     alert("retangle2");
}

</script>

<style scoped>
.circle {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    text-align: center;
    position: absolute; top: 100px; left: 165px;
    background-color:blue;
    color:white;
}
.circle2 {
    position: absolute; top: 100px; left: 365px;
}
.rectangle {
    border-radius: 10%;
    width: 200px;
    height: 300px;
    text-align: center;
    vertical-align : top;
    position: absolute; top: 0px;
    background-color:orange;
    padding-left:0px;
    padding-right:0px;

}
.rectangle2 {
    position: absolute; top: 0px;left:215px;

}
.rectangle3 {
    position: absolute; top: 0px;left:422px;

}
.rectangle4 {
    position: absolute; top: 0px;left:627px;


}

   .k-button-icontext .k-icon,
.k-button-icontext .k-image {
    margin: 0;
}
.k-i-plus, .k-button-icon:hover span.k-icon.k-i-plus {
    background-position: -48px -64px;
    opacity: 1;
}

</style>

</body>
</html>

Overlapping Navigation Buttons of Different Shapes

Guess you like