Круглые светящиеся кнопки
Пара Милых Круглых Светящихся Кнопок сделаных на CSS3! Для левой кнопки мы использовали плавную анимацию с помощью CSS3 свойства transition, которое создаёт плавный переход между двумя состояниями :hover и :active. 3D эффект достигается благодаря правильному использованию таких свойств, как box-shadow, border и gradient.
С помощью свойства border-radius мы предал кнопкам круглую форму. Анимация не будет работать в браузерах IE 6-9, т.к. в них нет её поддержки.
Давайте посмотрим код.
HTML:
<ul> <li><a class="grey_button" href="#"><span id="heart"> </span></a></li> <li><a class="green_button" href="#">H</a></li> </ul>
CSS:
ul { list-style: none }
ul li {
float: left;
margin-left: 15px;
}
/* GREY BUTTON
================================================== */
.grey_button:link {
height: 80px;
width: 80px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
position: relative;
float: left;
color: rgb(50,50,50);
-webkit-box-shadow: inset 0 5px 5px rgb(140,140,140), inset 0px 4px 50px #fff;
-moz-box-shadow: inset 0 5px 5px rgb(140,140,140), inset 0px 4px 50px #fff;
box-shadow: inset 0 5px 5px rgb(140,140,140), inset 0px 4px 50px #fff;
text-shadow: 0 1px rgb(250,250,250);
text-decoration: none;
text-transform: none;
font-size: 3.5em;
line-height: 65px;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
transition: box-shadow .5s linear;
-moz-transition: box-shadow .5s linear;
-o-transition: box-shadow .5s linear;
-webkit-transition: box-shadow .5s linear;
}
.grey_button:hover {
color: rgb(0,0,0);
-webkit-box-shadow: inset 0 5px 9px rgb(110,110,110), inset 0px 2px 4px #ccc;
-moz-box-shadow: inset 0 5px 9px rgb(110,110,110), inset 0px 2px 4px #ccc;
box-shadow: inset 0 5px 9px rgb(110,110,110), inset 0px 2px 4px #ccc;
}
.grey_button:active {
-webkit-box-shadow: inset 0 5px 9px rgb(110,110,110), inset 0 -2px 5px rgb(110,110,110);
-moz-box-shadow: inset 0 5px 9px rgb(110,110,110), inset 0 -2px 5px rgb(110,110,110);
box-shadow: inset 0 5px 9px rgb(110,110,110), inset 0 -2px 5px rgb(110,110,110);
}
/* HEART
================================================== */
#heart {
position: absolute;
top: 25px;
left: 25px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 15px;
top: 0;
width: 15px;
height: 25px;
background: red;
/* Rounded Corner */
-webkit-border-radius: 50px 50px 0 0;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
/* Rotation */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
/* Rotation */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin : 100% 100%;
}
/* GREEN GLOWING BUTTON
================================================== */
.green_button {
height: 60px;
width: 60px;
padding: 10px;
line-height: 60px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
-webkit-box-shadow: inset 0px 1px 3px #cfeff3;
-moz-box-shadow: inset 0px 1px 3px #cfeff3;
box-shadow: inset 0px 1px 3px #cfeff3;
background: -webkit-linear-gradient(top, #A2DBDC 0%, #59A5A8 50%, #418F93 51%, #2F777C 100%);
background: -moz-linear-gradient(top, #A2DBDC 0%, #59A5A8 50%, #418F93 51%, #2F777C 100%);
background: -ms-linear-gradient(top, #A2DBDC 0%, #59A5A8 50%, #418F93 51%, #2F777C 100%);
background: -o-linear-gradient(top, #A2DBDC 0%, #59A5A8 50%, #418F93 51%, #2F777C 100%);
background: linear-gradient(top, #A2DBDC 0%, #59A5A8 50%, #418F93 51%, #2F777C 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#A2DBDC’, endColorstr=’#2F777C’,GradientType=0 );
border: 1px solid #70c9d5;
cursor: pointer;
color: #e1fdff;
font-size: 24px;
letter-spacing: 0px;
text-shadow: #CDF2F7 0px 1px 0, #256569 0 -1px 0;
text-decoration: none;
display: block;
text-align: center;
}
.green_button:hover {
filter: alpha(opacity=94);
opacity: 0.94;
colour: #afe6e7;
}
.green_button:active {
background: -webkit-linear-gradient(top, #95d3d4 0%, #4c9da0 51%, #318185 52%, #226b70 100%);
background: -moz-linear-gradient(top, #95d3d4 0%, #4c9da0 51%, #318185 52%, #226b70 100%);
background: -ms-linear-gradient(top, #95d3d4 0%, #4c9da0 51%, #318185 52%, #226b70 100%);
background: -o-linear-gradient(top, #95d3d4 0%, #4c9da0 51%, #318185 52%, #226b70 100%);
background: linear-gradient(top, #95d3d4 0%, #4c9da0 51%, #318185 52%, #226b70 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#95d3d4?, endColorstr=’#226b70?,GradientType=0 );
-moz-box-shadow: inset 0px 0px 15px #256569;
-webkit-box-shadow: inset 0px 0px 15px #256569;
box-shadow: inset 0px 0px 15px #256569;
border: 1px solid #256569;
line-height: 62px !important;
}
Не поддерживаются браузеры:
- Internet Explorer 9.0 и ниже.
Перевод статьи "Rounded Glowing Buttons" с сайта "cssdeck.com"
P.S. Это тоже может быть интересно: