Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Delete Button
<html>
<head>
</head>
<body>
<button type="button" name="delete" id="box">
<div class="box-left">
<div class="partA"></div>
<div class="partA pA2"></div>
<div class="bar">
<div class="partB pB2"></div>
<div class="partB"></div>
</div>
</div>
<div class="box-right"></div>
</button>
</body>
</html>
$(document).ready(function() {
//----------Início do Botão----------//
$("#box").hover(function() {
$(".box-right").toggleClass('cl-box2');
$(".bar").toggleClass('cl-bar2');
});
$(".bar").click(function() {
alert("OK");
});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
.box-left {
position: absolute;
height: 100px;
width: 80px;
background-color: #e74c3c;
top: 0;
bottom: 0;
left: 0;
right: 50px;;
margin: auto;
cursor: pointer;
border-top-left-radius: 13px;
border-bottom-left-radius: 13px;
}
.box-right {
position: absolute;
height: 100px;
width: 20px;
background-color: #e74c3c;
top: 0;
bottom: 0;
left: 50px;
right: 0;
margin: auto;
transition: 0.5s;
cursor: pointer;
border-top-right-radius: 13px;
border-bottom-right-radius: 13px;
}
.partA {
position: absolute;
height: 50px;
width: 15px;
background-color: white;
-webkit-transform: rotate(-45deg);
top: 0;
bottom: 0;
left: 20px;
right: 0;
margin: auto;
}
.pA2 {
-webkit-transform: rotate(45deg);
}
.partB {
position: absolute;
height: 50px;
width: 15px;
background-color: black;
-webkit-transform: rotate(45deg);
top: 0;
bottom: 0;
left: 15px;
right: 0;
margin: auto;
}
.pB2 {
left: -35px;
height: 22px;
-webkit-transform: rotate(-45deg);
}
.bar {
height: 80px;
width: 0px;
background-color: lightgray;
position: absolute;
top: 10px;
bottom: 0;
left: 80px;
right: 0;
transition: 0.5s;
overflow: hidden;
}
.cl-bar2 {
width: 80px;
}
.cl-box2 {
left: 210px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment