Tiger Bird Webdesign: Fading Buttons With CSS Flex

Monday, 17 November 2014

Fading Buttons With CSS Flex

Fading Buttons With CSS Flex

Blue

Yellow

Green

Red

Orange

Pink

Here we have same sized buttons. CSS flex property makes it easy to create same sized objects. To make them more exciting I have added the transition property to them as well. The flex property can also be wrapped by using flex-wrap:wrap. To show it in Chrome, Safari and Opera don't forget to put the prefix -webkit- in front of flex-wrap.The border-radius has been set to 50% for the circles.
Note that hover will not work on a tablet.

HTML&CSS


<!DOCTYPE HTML>

<html>
<head>
<title>Fading Buttons With CSS Flex</title>
<style>
#text
{position:relative;
top:10px;
}
#boxten
{position:relative;
font-size:120%;
width:200px;
height:400px;
}

#box
{position:absolute;
width:600px;
height:350px;
display:-webkit-flex;
-webkit-flex-wrap:wrap;
diplay:flex;
flex-wrap:wrap;
}


#box .button
{width:100px;
height:100px;
}


.button
{
margin:20px;
padding:20px;
opacity:0.5;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
text-align:center;
font-size:200%;
}

.button:hover
{opacity:1.0;
-webkit-transition-duration:3s;
transition-duration:3s;}



</style>
</head>

<body>
<div id="boxten">
<div id="box">
<div class="button"style="background-color:blue;">
 Blue</div>
<div class="button" style="background-color:yellow;">
 Yellow </div>
<div class="button" style="background-color:green;">
Green </div>
<div class="button" style="background-color:red;">
 Red</div>
<div class="button" style="background-color:orange;">
 Orange</div>
<div class="button" style="background-color:pink;">
Pink </div>
</div>
</body>

</html>

Tiger Bird Webdesign

Monday, 17 November 2014

Fading Buttons With CSS Flex

HTML&CSS

No comments:

Post a Comment