You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1012 B
65 lines
1012 B
@import url('https://fonts.googleapis.com/css?family=Lato:100&display=swap');
|
|
|
|
body, html {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #5CA4EA;
|
|
overflow: hidden;
|
|
font-family: 'Lato', sans-serif;
|
|
}
|
|
|
|
.container {
|
|
width: 400px;
|
|
height: 400px;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.center {
|
|
width: 180px;
|
|
height: 60px;
|
|
position: absolute;
|
|
}
|
|
|
|
.btn {
|
|
width: 180px;
|
|
height: 60px;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border: 1px solid #91C9FF;
|
|
outline: none;
|
|
transition: 1s ease-in-out;
|
|
}
|
|
|
|
svg {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
fill: none;
|
|
stroke: #fff;
|
|
stroke-dasharray: 150 480;
|
|
stroke-dashoffset: 150;
|
|
transition: 1s ease-in-out;
|
|
}
|
|
|
|
.btn:hover {
|
|
transition: 1s ease-in-out;
|
|
background: #4F95DA;
|
|
}
|
|
|
|
.btn:hover svg {
|
|
stroke-dashoffset: -480;
|
|
}
|
|
|
|
.btn span {
|
|
color: white;
|
|
font-size: 18px;
|
|
font-weight: 100;
|
|
} |