Responsive button animation CSS - html
I'm trying to combine the look of one button, with the responsiveness of another button:
Button A: https://codepen.io/vitor-siqueira/pen/xNBExN
Button B: https://codepen.io/AnthonyBmm/pen/poooJmO
I would like to make Button C, which looks and feels exactly like Button A, but it automagically resizes to fit the button text (no wrap, like Button B). At the moment I create 3-4 virtually identical Button A's and adjust the width values of the SVG and the CSS, which... is terrible practice.
I found Button B which has a similar animation but without an SVG and thought that it may be a good start to try and replicate the Button A effect, but I haven't been able to succeed.
Can someone help please?
The attached code from the 2 pens can be found below:
Button A HTML:
<div class="container">
<div class="center">
<button class="btn">
<svg width="180px" height="60px" viewBox="0 0 180 60" class="border">
<polyline points="179,1 179,59 1,59 1,1 179,1" class="bg-line" />
<polyline points="179,1 179,59 1,59 1,1 179,1" class="hl-line" />
</svg>
<span>HOVER ME</span>
</button>
</div>
</div>
Button A CSS:
#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;
}
Button B HTML:
<body>
<a href="#">push this and that
<span></span>
<span></span>
<span></span>
<span></span>
</a>
</body>
Button B CSS:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #999;
}
a {
/*border-radius: 12px;*/
border: 3px outset #888;
position: relative;
display: inline-block;
padding: 15px 30px;
color: #eee;
text-transform: uppercase;
letter-spacing: 4px;
overflow: hidden;
box-shadow: 0 0 10px rgb(0, 0, 0, 1);
font-family: verdana;
font-size: 28px;
font-weight: bolder;
text-decoration: none;
background:linear-gradient(160deg, #666, #444);
text-shadow: 0px 0px 2px rgba(0, 0, 0, .5);
transition: 0.2s;
}
a:active {
border: 3px outset #ddd;
color: #fff;
background: linear-gradient(160deg, #666, #444);
text-shadow: 0px 0px 4px #ccc;
box-shadow: 0 0 10px #fff, 0 0 40px #fff, 0 0 80px #fff;
transition-delay: 1s;
}
a span {
position: absolute;
display: block;
}
a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #eee);
}
a:active span:nth-child(1) {
left: 100%;
transition: 1s;
}
a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #eee);
}
a:active span:nth-child(2) {
top: 100%;
transition: 1s;
transition-delay: 0.25s;
}
a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #eee);
}
a:active span:nth-child(3) {
right: 100%;
transition: 1s;
transition-delay: 0.5s;
}
a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #eee);
}
a:active span:nth-child(4) {
bottom: 100%;
transition: 1s;
transition-delay: 0.75s;
}
Is this what you are looking for?
#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;
}
button:active {
border: 3px outset #ddd;
color: #fff;
background: linear-gradient(160deg, #666, #444);
text-shadow: 0px 0px 4px #ccc;
box-shadow: 0 0 10px #fff, 0 0 40px #fff, 0 0 80px #fff;
transition-delay: 1s;
}
<div class="container">
<div class="center">
<button class="btn">
<svg width="180px" height="60px" viewBox="0 0 180 60" class="border">
<polyline points="179,1 179,59 1,59 1,1 179,1" class="bg-line" />
<polyline points="179,1 179,59 1,59 1,1 179,1" class="hl-line" />
</svg>
<span>HOVER ME</span>
</button>
</div>
</div>
This "Correction" of mine was based on the post this post to make svg responsible.
Sorry for the english of google translator.
#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;
}
.btn {
cursor: pointer;
background: transparent;
border: 1px solid #91C9FF;
outline: none;
transition: 1s ease-in-out;
padding:3%;
padding-top:2%;
padding-bottom:2%;
position: relative;
display: flex;
}
svg {
width: calc(100% + 2px);
height: calc(100% + 2px);
position: absolute;
left: -1px;
top: -1px;
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;
}
.bg-line{
width:100px;
height:100px;
}
.btn span {
color: white;
font-size: 18px;
font-weight: 100;
}
<div class="container">
<button class="btn">
<!-- edit -->
<svg viewBox="0 0 180 60" class="border" preserveAspectRatio="none" class="border">
<polyline points="179,1 179,59 1,59 1,1 179,1" class="bg-line" />
<polyline points="179,1 179,59 1,59 1,1 179,1" class="hl-line" />
</svg>
<span>Junior is AWESOME</span>
</button>
</div>
OR
I really wanted to find a more correct way to do this without using SVG, I researched it all day, this is what I got:
I used the Animation, Before and Linear-gradient properties. The animation is not fluid because I'm not really good at it, and above all I recommend using a file just for keyframes.
(The "back" animation can be included later: D)
English from google translator
#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;
}
.btn {
cursor: pointer;
background: rgb(99, 169, 235);
border: 1px solid #91C9FF;
outline: none;
transition: 1s ease-in-out;
padding:3%;
padding-top:2%;
padding-bottom:2%;
position: relative;
display: flex;
}
.btn::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
margin: -3px; /* !importanté */
border-radius: inherit; /* !importanté */
background: linear-gradient(0deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0) 99%, rgba(255,255,255,0) 100%);
}
.btn:hover::before{
-webkit-animation: all 1s; /* Chrome, Safari, Opera */
animation: all 1s;
transition:animation 1s ease-in-out;
}
#keyframes all {
2% {
background: linear-gradient(-45deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.3) 99%, rgba(255,255,255,0) 100%);
}
5% {
background: linear-gradient(-45deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.5) 99%, rgba(255,255,255,0) 100%);
}
7% {
background: linear-gradient(-45deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
14% {
background: linear-gradient(-23deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
22% {
background: linear-gradient(0deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
28% {
background: linear-gradient(23deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
35% {
background: linear-gradient(45deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
43% {
background: linear-gradient(90deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
50% {
background: linear-gradient(120deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
57% {
background: linear-gradient(145deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
64% {
background: linear-gradient(180deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
71% {
background: linear-gradient(200deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
78% {
background: linear-gradient(220deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
85% {
background: linear-gradient(300deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
92% {
background: linear-gradient(320deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
94% {
background: linear-gradient(345deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.9) 99%, rgba(255,255,255,0) 100%);
}
97% {
background: linear-gradient(345deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.5) 99%, rgba(255,255,255,0) 100%);
}
100% {
background: linear-gradient(345deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.3) 99%, rgba(255,255,255,0) 100%);
}
}
/* Chrome, Safari, Opera */
#-webkit-keyframes all {
2% {
background: linear-gradient(-45deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.3) 99%, rgba(255,255,255,0) 100%);
}
5% {
background: linear-gradient(-45deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.5) 99%, rgba(255,255,255,0) 100%);
}
7% {
background: linear-gradient(-45deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
14% {
background: linear-gradient(-23deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
22% {
background: linear-gradient(0deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
28% {
background: linear-gradient(23deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
35% {
background: linear-gradient(45deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
43% {
background: linear-gradient(90deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
50% {
background: linear-gradient(120deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
57% {
background: linear-gradient(145deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
64% {
background: linear-gradient(180deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
71% {
background: linear-gradient(200deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
78% {
background: linear-gradient(220deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
85% {
background: linear-gradient(300deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
92% {
background: linear-gradient(320deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
94% {
background: linear-gradient(345deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.9) 99%, rgba(255,255,255,0) 100%);
}
97% {
background: linear-gradient(345deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.5) 99%, rgba(255,255,255,0) 100%);
}
100% {
background: linear-gradient(345deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.3) 99%, rgba(255,255,255,0) 100%);
}
}
.btn:hover {
transition: 1s ease-in-out;
background: #4F95DA;
}
.btn:hover svg {
stroke-dashoffset: -480;
}
.bg-line{
width:100px;
height:100px;
}
.btn span {
color: white;
font-size: 18px;
font-weight: 100;
}
<div class="container">
<button class="btn">
<!-- edit -->
<span>Junior is AWESOME</span>
</button>
</div>
Related
Picture Tag doesn't resize properly on loading two sources (png and webp)
I'm building a website that has a 3D book:
My main goal is to support a png and a webp image for all browsers. If I only load one image all is working fine:
.book-container {
display: flex;
align-items: center;
justify-content: center;
perspective: 600px;
}
#keyframes initAnimation {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(-30deg);
}
}
.book {
width: 200px;
height: 320px;
position: relative;
transform-style: preserve-3d;
transform: rotateY(-30deg);
transition: 1s ease;
animation: 1s ease 0s 1 initAnimation;
}
.book:hover {
transform: rotateY(0deg);
}
.book > :first-child {
position: absolute;
top: 0;
left: 0;
background-color: red;
width: 200px;
height: 320px;
transform: translateZ(25px);
background-color: #01060f;
border-radius: 0 2px 2px 0;
box-shadow: 5px 5px 20px #E5E4E2;
}
.book::before {
position: absolute;
content: ' ';
background-color: blue;
left: 0;
top: 3px;
width: 48px;
height: 314px;
transform: translateX(172px) rotateY(90deg);
background: linear-gradient(90deg,
#fff 0%,
#f9f9f9 5%,
#fff 10%,
#f9f9f9 15%,
#fff 20%,
#f9f9f9 25%,
#fff 30%,
#f9f9f9 35%,
#fff 40%,
#f9f9f9 45%,
#fff 50%,
#f9f9f9 55%,
#fff 60%,
#f9f9f9 65%,
#fff 70%,
#f9f9f9 75%,
#fff 80%,
#f9f9f9 85%,
#fff 90%,
#f9f9f9 95%,
#fff 100%
);
}
.book::after {
position: absolute;
top: 0;
left: 0;
content: ' ';
width: 200px;
height: 320px;
transform: translateZ(-25px);
background-color: #01060f;
border-radius: 0 2px 2px 0;
box-shadow: -10px 0 50px 10px #666;
}
<a
class="book-container"
href="#"
target="_blank"
rel="noreferrer noopener">
<div class="book">
<img
alt="My Cover"
src="https://i.stack.imgur.com/1MPyO.png"
/>
</div>
</a>
But when I add the picture element to support both, the image loses the resize:
.book-container {
display: flex;
align-items: center;
justify-content: center;
perspective: 600px;
}
#keyframes initAnimation {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(-30deg);
}
}
.book {
width: 200px;
height: 320px;
position: relative;
transform-style: preserve-3d;
transform: rotateY(-30deg);
transition: 1s ease;
animation: 1s ease 0s 1 initAnimation;
}
.book:hover {
transform: rotateY(0deg);
}
.book > :first-child {
position: absolute;
top: 0;
left: 0;
background-color: red;
width: 200px;
height: 320px;
transform: translateZ(25px);
background-color: #01060f;
border-radius: 0 2px 2px 0;
box-shadow: 5px 5px 20px #E5E4E2;
}
.book::before {
position: absolute;
content: ' ';
background-color: blue;
left: 0;
top: 3px;
width: 48px;
height: 314px;
transform: translateX(172px) rotateY(90deg);
background: linear-gradient(90deg,
#fff 0%,
#f9f9f9 5%,
#fff 10%,
#f9f9f9 15%,
#fff 20%,
#f9f9f9 25%,
#fff 30%,
#f9f9f9 35%,
#fff 40%,
#f9f9f9 45%,
#fff 50%,
#f9f9f9 55%,
#fff 60%,
#f9f9f9 65%,
#fff 70%,
#f9f9f9 75%,
#fff 80%,
#f9f9f9 85%,
#fff 90%,
#f9f9f9 95%,
#fff 100%
);
}
.book::after {
position: absolute;
top: 0;
left: 0;
content: ' ';
width: 200px;
height: 320px;
transform: translateZ(-25px);
background-color: #01060f;
border-radius: 0 2px 2px 0;
box-shadow: -10px 0 50px 10px #666;
}
<a class="book-container"
href="#"
target="_blank"
rel="noreferrer noopener">
<div class="book">
<picture>
<source srcset="https://i.ibb.co/grB6NbQ/THE-BOOK-cover-image.webp" type="image/webp">
<source srcset="https://i.stack.imgur.com/1MPyO.png" type="image/png">
<img
alt="My Cover"
src="https://i.stack.imgur.com/1MPyO.png"/>
</picture>
</div>
</a>
Any idea what should I change? I guess the main issue is in this part of the code:
.book > :first-child {
position: absolute;
top: 0;
left: 0;
background-color: red;
width: 200px;
height: 320px;
transform: translateZ(25px);
background-color: #01060f;
border-radius: 0 2px 2px 0;
box-shadow: 5px 5px 20px #E5E4E2;
}
Here is the full snippet if you want to check it:
https://jsfiddle.net/p01vac52/1/
But I'm not so sure, I didn't expect that the picture element will fully break it. Or do you think it's a better idea to change the source using JS?
As commented,
The srcset attribute selects which image to load based on its size values and device specs, the picture / img elements will still need width/height values to scale the loaded image to the required size.
I added img { width: 100% } to make the image fit inside .book { width: 200px; height: 320px; }.
.book-container {
display: flex;
align-items: center;
justify-content: center;
perspective: 600px;
}
#keyframes initAnimation {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(-30deg);
}
}
.book {
width: 200px;
height: 320px;
position: relative;
transform-style: preserve-3d;
transform: rotateY(-30deg);
transition: 1s ease;
animation: 1s ease 0s 1 initAnimation;
}
img {
width: 100%;
}
.book:hover {
transform: rotateY(0deg);
}
.book> :first-child {
position: absolute;
top: 0;
left: 0;
background-color: red;
width: 200px;
height: 320px;
transform: translateZ(25px);
background-color: #01060f;
border-radius: 0 2px 2px 0;
box-shadow: 5px 5px 20px #E5E4E2;
}
.book::before {
position: absolute;
content: ' ';
background-color: blue;
left: 0;
top: 3px;
width: 48px;
height: 314px;
transform: translateX(172px) rotateY(90deg);
background: linear-gradient(90deg, #fff 0%, #f9f9f9 5%, #fff 10%, #f9f9f9 15%, #fff 20%, #f9f9f9 25%, #fff 30%, #f9f9f9 35%, #fff 40%, #f9f9f9 45%, #fff 50%, #f9f9f9 55%, #fff 60%, #f9f9f9 65%, #fff 70%, #f9f9f9 75%, #fff 80%, #f9f9f9 85%, #fff 90%, #f9f9f9 95%, #fff 100%);
}
.book::after {
position: absolute;
top: 0;
left: 0;
content: ' ';
width: 200px;
height: 320px;
transform: translateZ(-25px);
background-color: #01060f;
border-radius: 0 2px 2px 0;
box-shadow: -10px 0 50px 10px #666;
}
<a class="book-container" href="#" target="_blank" rel="noreferrer noopener">
<div class="book">
<picture>
<source srcset="https://i.ibb.co/grB6NbQ/THE-BOOK-cover-image.webp" type="image/webp">
<source srcset="https://i.stack.imgur.com/1MPyO.png" type="image/png">
<img alt="My Cover" src="https://i.stack.imgur.com/1MPyO.png" />
</picture>
</div>
</a>
rotate animation render only half of the element
I'm trying to animate a rotating gold ray of lights, below image is the achieved layout using html and css but when I tried to add a rotate animation, seems layout cut on half. Below code snippet is what is my attempt. Any help, ideas is greatly appreciated.
#import('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css');
body {
background: #ededed;
padding: 64px 0;
font-family: Roboto, sans-serif;
font-size: 12px
}
.banner {
max-width: 100%;
max-height: 100%;
-webkit-box-shadow: 0 10px 40px -6px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 10px 40px -6px rgba(0, 0, 0, .1);
-o-box-shadow: 0 10px 40px -6px rgba(0, 0, 0, .1);
box-shadow: 0 10px 40px -6px rgba(0, 0, 0, .1)
}
.winners-intro {
background: #ededed;
z-index: 999
}
.winners-intro,
.winners-intro .winners-light {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0
}
.winners-intro .winners-light {
-webkit-animation-name: winners_light;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-name: winners_light;
animation-duration: 10s;
animation-iteration-count: infinite
}
.winners-intro .winners-light .radial-light {
width: 100px;
height: 100px;
background: gold;
box-shadow: 1px 1px 100px 50px gold;
-webkit-box-shadow: 1px 1px 100px 50px gold;
-moz-box-shadow: 1px 1px 100px 50px gold;
-o-box-shadow: 1px 1px 100px 50px gold;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: absolute
}
.winners-intro .winners-light .light {
position: absolute;
background: gold;
height: 200vh;
width: 20px;
opacity: .5;
background: transparent;
background: -webkit-linear-gradient(bottom, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent);
background: linear-gradient(0deg, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent)
}
.winners-intro .winners-light .light:nth-child(2) {
transform: skewX(30deg)
}
.winners-intro .winners-light .light:nth-child(2),
.winners-intro .winners-light .light:nth-child(3) {
background: transparent;
background: -webkit-linear-gradient(bottom, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent);
background: linear-gradient(0deg, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent)
}
.winners-intro .winners-light .light:nth-child(3) {
transform: skewX(60deg)
}
.winners-intro .winners-light .light:nth-child(4) {
transform: skewX(90deg)
}
.winners-intro .winners-light .light:nth-child(4),
.winners-intro .winners-light .light:nth-child(6) {
background: transparent;
background: -webkit-linear-gradient(bottom, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent);
background: linear-gradient(0deg, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent)
}
.winners-intro .winners-light .light:nth-child(6) {
transform: skewX(-30deg)
}
.winners-intro .winners-light .light:nth-child(7) {
transform: skewX(-60deg);
background: transparent;
background: -webkit-linear-gradient(bottom, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent);
background: linear-gradient(0deg, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent)
}
.winners-intro .winners-light .light:nth-child(8) {
width: 100%!important;
height: 10px!important;
background: transparent;
background: -webkit-linear-gradient(left, transparent 10%, gold 50%, transparent 90%, transparent);
background: linear-gradient(90deg, transparent 10%, gold 50%, transparent 90%, transparent)
}
.winners-intro .winners-trophy {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10
}
#-webkit-keyframes winners_light {
to {
transform: rotate(-1turn)
}
}
#keyframes clouds {
to {
transform: rotate(-1turn)
}
}
<div class="winners-intro">
<div>
<div class="winners-light">
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="radial-light"></div>
</div>
</div>
</div>
I would simplify the code like below where you will not have the issue:
body {
background: #ededed;
margin:0;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
height:100vh;
}
.light {
height: 100vmax;
width:100vmax;
background:
radial-gradient(circle ,rgba(255, 215, 0, 1 ) 8vmax,transparent 8vmax),
radial-gradient(circle ,rgba(255, 215, 0, 0.6)8vmax,transparent 17vmax),
linear-gradient(to bottom, transparent 10%,gold,transparent 90%) center/10px 100%,
linear-gradient(to right , transparent 10%,gold,transparent 90%) center/100% 10px;
background-repeat:no-repeat;
position:relative;
overflow:hidden;
animation:move 5s linear infinite;
}
.light:before,
.light:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:inherit;
background-size:0 0,0 0,10px 100%,100% 10px;
transform:rotate(30deg);
}
.light:after{
transform:rotate(-30deg);
}
#keyframes move {
to {
transform:rotate(1turn);
}
}
<div class="light"></div>
Label of Checkbox is wrong
my problem is that i have a <asp:CheckBoxList> and i have 2 list items with text but my text is inside my checkbox and i searched everywhere and didn't found an answer to that. All i want to do is have the text aligned to the right of the textbox and not inside it.
Here is some code to check it out:
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="squaredTwo">
<asp:CheckBoxList
ID="squaredTwo"
CellPadding="5"
CellSpacing="5"
runat="server">
<asp:ListItem Text="Hello i'm fred" />
<asp:ListItem Text="Hello i'm mike" />
</asp:CheckBoxList>
</div>
</div>
</div>
CSS
.squaredTwo #squaredTwo {
margin-top: 5px;
}
.squaredTwo {
width: 24px;
height: 24px;
background: #f5f5f5;
background: -webkit-linear-gradient(top, #0099b5 0%, #0099b5 40%, #0099b5 100%);
background: -moz-linear-gradient(top, #0099b5 0%, #0099b5 40%, #0099b5 100%);
background: -o-linear-gradient(top, #0099b5 0%, #0099b5 40%, #0099b5 100%);
background: -ms-linear-gradient(top, #0099b5 0%, #0099b5 40%, #0099b5 100%);
background: linear-gradient(top, #0099b5 0%, #0099b5 40%, #0099b5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
position: relative;
}
.squaredTwo input[type=checkbox] {
margin-left: 5px;
}
.squaredTwo label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
left: 2px;
top: 2px;
background: -webkit-linear-gradient(top, #f5f5f5 0%, #f5f5f5 100%);
background: -moz-linear-gradient(top, #f5f5f5 0%, #f5f5f5 100%);
background: -o-linear-gradient(top, #f5f5f5 0%, #f5f5f5 100%);
background: -ms-linear-gradient(top, #f5f5f5 0%, #f5f5f5 100%);
background: linear-gradient(top, #f5f5f5 0%, #f5f5f5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#f5f5f5',GradientType=0 );
}
.squaredTwo label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 12px;
height: 7px;
background: transparent;
top: 5px;
left: 4px;
border: 3px solid #0099b5;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.squaredTwo label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.squaredTwo input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
I resolved the problem. I just used another CSS but the same HTML. Here you go if you have some problem with this:
input[type=checkbox] {
position: absolute;
z-index: -1000;
left: -1000px;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
input[type=checkbox] + label {
padding-left: 29px;
height: 23px;
display: inline-block;
line-height: 23px;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 14px;
margin-bottom: 20px;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
color: #000;
font-family: sans-serif;
}
input[type=checkbox]:checked + label {
background-position: 0 -23px;
}
label {
background-image: url(nameofyourimage);
background-size: 23px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
PS: You need an image like this: http://i.imgur.com/zg4tHVq.png
How can I create a round arrow with only HTML and CSS?
I'm trying to create a round directional arrow with CSS and HTML. Below are my attempts.
Attempt 1
In this I have rotated the <div> and an arrow, but both are in different positions.
This is the CSS:
#curves div {
width: 100px;
height: 100px;
border: 5px solid #999;
}
#curves.width div {
border-color: transparent transparent transparent #999;
}
#curve1 {
-moz-border-radius: 50px 0 0 50px;
border-radius: 50px 0 0 50px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 27px solid #ccc;
float: right;
margin-top: -7px;
margin-right: -26px;
}
<div id="curves" class="width">
<div id="curve1"></div><span class="arrow-right"></span>
</div>
Attempt 2
In this the arrow I have created is straight.
.container {
width: 60%;
height: 9px;
background: #ccc;
margin: 100px auto;
-moz-border-radius: 50px 0 0 50px;
border-radius: 50px 0 0 50px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 27px solid #ccc;
float: right;
margin-top: -7px;
margin-right: -26px;
}
<div class="container">
</span><span class="arrow-right"></span>
</div>
Update
I want it something like this
You could use a pseudo element to generate the triangle (using the famous border hack).
After that, you would be able to use a thick border on the actual element (with a border-radius of 50% to make it a circle). This allows you to rotate the arrow to your liking.
div {
border: 20px solid transparent;
border-top-color: black;
border-left-color: black;
height: 100px;
width: 100px;
border-radius: 50%;
position: relative;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
margin:30px auto;
}
div:before {
content: "";
position: absolute;
top: -20px;
left: 80%;
height: 0;
width: 0;
border-left: 30px solid black;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/*BELOW IS FOR DEMO ONLY*/
div:hover {
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
transform: rotate(315deg);
transition: all 0.8s;
}
html {
text-align:center;
color:white;
font-size:30px;
height: 100%;
background: rgb(79, 79, 79);
/* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
/* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* IE10+ */
background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
HOVER ME
<div></div>
If you then wanted to lengthen the arrow, you could make the bottom border visible. For example;
div {
border: 20px solid transparent;
border-top-color: black;
border-left-color: black;
border-bottom-color: black;
height: 100px;
width: 100px;
border-radius: 50%;
position: relative;
transform: rotate(-45deg);
margin:30px auto;
}
div:before {
content: "";
position: absolute;
top: -20px;
left: 80%;
height: 0;
width: 0;
border-left: 30px solid black;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
transform: rotate(45deg);
}
/*BELOW IS FOR DEMO ONLY*/
div:hover {
transform: rotate(315deg);
transition: all 0.8s;
}
html {
text-align:center;
color:white;
font-size:30px;
height: 100%;
background: rgb(79, 79, 79);
/* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
/* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* IE10+ */
background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
HOVER ME
<div></div>
SVG solution The shape is really simple to create in SVG. For the svg interested: <svg width="200px" height="200px" viewbox="0 0 400 400"> <path stroke="#000" stroke-width="50" fill="none" d="M200 350 A 100 100 0 0 1 200 150 M200 150 200 125 225 150 200 175Z"/> </svg> Can i use it?
I have created this little thing in CSS, you can look at the code to see how it works.
Note: this does need a solid background.
.arrow {
width: 200px;
height: 200px;
border: 6px solid;
border-radius: 50%;
position: relative;
}
.arrow:before {
content: "";
display: block;
width: 10px;
height: 50px;
background: #fff;
position: absolute;
bottom: 0;
top: 0;
right: -6px;
margin: auto;
}
.arrow:after {
content: "";
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #000;
position: absolute;
bottom: 106px;
right: -20px;
}
<div class="arrow"></div>
Here's another way to do it using clip-paths instead of messing around with borders.
Demo - http://jsfiddle.net/r8rd0yde/4/
.arrow {
position: relative;
padding: 20px;
width: 100px;
height: 100px;
}
.circle {
position: absolute;
box-sizing: border-box;
height: 100px;
width: 100px;
border: 15px solid #000;
border-radius: 50%;
-webkit-clip-path: inset(0 50% 0 0);
clip-path: inset(0 50% 0 0);
}
.triangle {
position: absolute;
width: 35px;
height: 30px;
background: #000;
margin-top: -6px;
margin-left: 38px;
-webkit-clip-path: polygon(50% 0, 0% 100%, 100% 100%);
clip-path: polygon(50% 0, 0% 100%, 100% 100%);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
/* JUST FOR DEMO */
.arrow:hover {
-webkit-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
transition: all 1.2s;
}
<div class="arrow">
<div class="circle"></div>
<div class="triangle"></div>
</div>
You can use the Clockwise open circle arrow (U+21BB) character: ↻
.arrow {
display: inline-block;
font-size: 300px;
line-height: 200px;
font-weight: bold;
transform: rotate(90deg);
}
<span class="arrow">↻</span>
#curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid red;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
#curvedarrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 3px solid red;
border-radius: 20px 0 0 0;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
I found this in
https://css-tricks.com/examples/ShapesOfCSS/
It may not be the exact shape you want but it's definately a good starting point.
Adding CSS Trapezoid Shape :After Button
I'm attempting to create a button style for a client, and cannot seem to get it working using the after pseudo-class.
<style>
$varBase: 40px;
$imsblue: #012169;
$imsgrey: #012169;
body {
background:grey;
}
.btn {
position: relative;
float: left;
height: $varBase;
font-family: sans-serif;
text-align: center;
line-height: $varBase;
color: white;
white-space: nowrap;
text-transform: uppercase;
background: $imsblue;
&:before {
float: left;
content:"";
width: ($varBase/4);
height: ($varBase/2);
}
&:after {
position: absolute;
content:"";
height: ($varBase/2);
border-left: ($varBase/2) solid $imsblue;
border-bottom: ($varBase/2) solid transparent;
}
a {
color: white;
text-decoration:none;
padding: ($varBase/4) ($varBase/2);
margin-right: -10px;
}
}
.btn3 {
display: inline;
color: white;
background: linear-gradient(135deg, rgba(1,33,105,1) 0%, rgba(1,33,105,1) 93%, rgba(30, 87, 153, 0) 93%, rgba(30, 87, 153, 0) 100%);
outline: 0;
border: 0;
padding: 10px 0px;
a {
color: inherit ;
text-transform: uppercase;
text-decoration:none;
padding: ($varBase/4) $varBase;
}
}
</style>
<div class="btn">Click to Submit</div>
<div class="btn3">Click to Submit</div>
I can get it to show using two DIVs, but I need this to work with just one class. Can someone help me see what I'm doing wrong?
It's supposed to look like this (barring color and size of course):
I believe the key element missing is that you need to include a content:"" in your :after pseudoclass. See the example below.
.btn {
height: 40px;
background: red;
width: 128px;
float:left;
}
.btn:after {
width: 0px;
height: 20px;
border-left: 20px solid red;
border-bottom: 20px solid white;
float:right;
content:"";
}
<div class="btn">Button</div>
This will work - I had to convert your SCSS to CSS, but it's clear enough.
.btn {
height: 40px; width: 200px;
background: red;
position: relative; /* work as container */
}
.btn:after {
content: ''; /* needed */
display: block;
position: absolute; /* position to container */
right: 0; bottom: 0;
border-left: 20px solid red;
border-bottom: 20px solid white;
}
<div class="btn">Button</div>
Unfortunately, you can't have "transparent" overlay, it just wont work. I had to use white for it.
I found a solution that works where the "cut" is transparent. You can use regular background or image background for the button:
http://jsfiddle.net/q45w2f78/
<div class="buttoncut gon">My button</div>
CSS:
.gon {
width: 220px;
height: 220px;
background: darkblue;
background-size: 220px 220px;
/* Text styling */
line-height: 220px;
text-align: center;
font-family: sans-serif;
font-size: 15px;
font-weight: bold;
letter-spacing: 6px;
color: beige;
}
.gon:hover {
color: #fff;
text-shadow: 0 0 10px white;
}
.buttoncut {
height: 200px;
-webkit-clip-path: polygon(0% 0%, 100% 0, 100% 50%, 60% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0, 100% 50%, 60% 100%, 0% 100%);
-moz-clip-path: polygon(0% 0%, 100% 0, 100% 50%, 60% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0, 100% 50%, 60% 100%, 0% 100%);
-ms-clip-path: polygon(0% 0%, 100% 0, 100% 50%, 60% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0, 100% 50%, 60% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0, 100% 50%, 60% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0, 100% 50%, 60% 100%, 0% 100%);
}
I used this generator to get the correct polygon css: http://bennettfeely.com/clippy/
Gradients:
You could use gradients in order to achieve this, and that way you can apply it to any element (this one's done with a button element):
html,body{
background:red;
}
button {
background: -moz-linear-gradient(-45deg, rgba(30, 87, 153, 1) 0%, rgba(30, 87, 153, 1) 89%, rgba(30, 87, 153, 0) 90%, rgba(30, 87, 153, 0) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(30, 87, 153, 1)), color-stop(89%, rgba(30, 87, 153, 1)), color-stop(90%, rgba(30, 87, 153, 0)), color-stop(100%, rgba(30, 87, 153, 0)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(30, 87, 153, 1) 0%, rgba(30, 87, 153, 1) 89%, rgba(30, 87, 153, 0) 90%, rgba(30, 87, 153, 0) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(30, 87, 153, 1) 0%, rgba(30, 87, 153, 1) 89%, rgba(30, 87, 153, 0) 90%, rgba(30, 87, 153, 0) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(30, 87, 153, 1) 0%, rgba(30, 87, 153, 1) 89%, rgba(30, 87, 153, 0) 90%, rgba(30, 87, 153, 0) 100%);
/* IE10+ */
background: linear-gradient(135deg, rgba(30, 87, 153, 1) 0%, rgba(30, 87, 153, 1) 89%, rgba(30, 87, 153, 0) 90%, rgba(30, 87, 153, 0) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#001e5799', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
outline:0;
border:0;
padding:5px;
}
<button>PressMe</button>
Pseudo Element (not great for gradient/image backgrounds)
div {
position: relative;
display:inline-block;
padding:5px;
background:gray;
}
div:after{
content:"";
position:absolute;
border-bottom:10px solid blue;
border-left:10px solid transparent;
bottom:0;
right:0;
}
html,body{
background:blue;
}
<div>Press Me!</div>
Clip Path
button {
padding: 10px;
height: 60px;
width: 60px;
-webkit-clip-path: polygon(0% 0%, 100% 0, 100% 75%, 75% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0, 100% 75%, 75% 100%, 0% 100%);
}
html,body{
background:green;
}
<button>press me!!!</button>
Dynamic length
by using the following snippet, you can make a great button, which isn't affected by length!
button {
position: relative;
border: 0;
outline: 0;
height: 20px;
background: gray;
}
button:after {
position: absolute;
content: "";
right: -10px;
width: 0px;
height: 0px;
bottom: 0;
border-bottom: 10px solid transparent;
border-left: 10px solid gray;
}
button:before {
position: absolute;
content: "";
right: -10px;
width: 10px;
height: 10px;
top: 0;
background: gray;
}
html,
body {
background: red;
}
/*HOVER EFFECTS*/
button:hover,
button:hover:before {
background: yellow;
}
button:hover:after {
border-left: 10px solid yellow;
}
<button>press me and plus i can get really long!</button>