Skip to content

Instantly share code, notes, and snippets.

@zaidw21

zaidw21/html

Created January 17, 2020 09:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zaidw21/fc065812054b6caef2fec4008892aebc to your computer and use it in GitHub Desktop.
Save zaidw21/fc065812054b6caef2fec4008892aebc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
html
<html>
<head>
<title>Test</title>
<style>
@import 'https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300';
html,
body {
margin: 0;
font-family: 'Open Sans Condensed', sans-serif;
}
.box-1 {
background-color: #FF6766;
padding: 1rem;
}
.btn {
line-height: 3rem;
height: 3rem;
text-align: center;
width: 10rem;
cursor: pointer;
}
.btn-one {
color: #FFF;
transition: all 0.3s;
position: relative;
}
.btn-one span {
transition: all 0.3s;
}
.btn-one::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: all 0.3s;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: rgba(255, 255, 255, 0.5);
border-bottom-color: rgba(255, 255, 255, 0.5);
transform: scale(0.1, 1);
}
.btn-one:hover span {
letter-spacing: 2px;
}
.btn-one:hover::before {
opacity: 1;
transform: scale(1, 1);
}
.btn-one::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: all 0.3s;
background-color: rgba(255, 255, 255, 0.1);
}
.btn-one:hover::after {
opacity: 0;
transform: scale(0.1, 1);
}
</style>
<script language='javascript' src='convert.js'></script>
</head>
<body>
<form name='testForm' style="margin: 0 !important;
margin-block-end: 0 !important;">
<!-- Hover #1 -->
<div class="box-1" id="Convert">
<div class="btn btn-one">
<span>Shorten</span>
</div>
</div>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment