Skip to content

Instantly share code, notes, and snippets.

@HarshKumarChoudary

HarshKumarChoudary/Play pause button

Last active May 7, 2021 10:54
Show Gist options
  • Save HarshKumarChoudary/eb28c0ca68ba1b29555e8606eb9d9753 to your computer and use it in GitHub Desktop.
Save HarshKumarChoudary/eb28c0ca68ba1b29555e8606eb9d9753 to your computer and use it in GitHub Desktop.
Download ZIP
Css code for play/pause button
Raw
Play pause button
This is the HTML Code for making the play/pause buttons design:
<html>
<body>
<style>
.main{
width:350px;
height:210px;
transform:rotate(-30deg);
}
.triangle {
position: relative;
background-color: orange;
justify:center;
top:60px;
left:150px;
width: 5em;
height: 5em;
border-top-right-radius: 20%;
transform: rotate(-60deg) skewX(-30deg) scale(1,.865);
}
.triangle:before,
.triangle:after {
content: '';
position: absolute;
background-color: red;
width: 5em;
height: 5em;
border-top-right-radius: 30%;
}
.triangle:before {
transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle:after {
background-color: blue;
transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
.line_1{
width:20px;
height:130px;
padding:8px;
background:green;
border-radius:15%;
transform:translate(1000%,-120%);
}
.line_2{
width:20px;
height:130px;
padding:8px;
background:green;
border-radius:15%;
transform:translate(1200%,-220%);
}
</style>
<div class="main">
<div class="triangle"></div>
</div><span>
<div class="line_1">
</div>
</span>
<span>
<div class="line_2">
</div>
</span>
</body>
</html>
OUTPUT:
Image:
@HarshKumarChoudary
Copy link
Author

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment