Градиент для кнопок на сайте

Градиент для кнопок на сайте
HTML и CSS 0    17 0
Градиент для кнопок на сайте

HTML разметка

	

CSS оформление

#button-design .b-green,#button-design .b-green:before{background:#499bea;background:-moz-linear-gradient(45deg,#499bea 0,#1abc9c 100%);background:-webkit-gradient(left bottom,right top,color-stop(0,#499bea),color-stop(100%,#1abc9c));background:-webkit-linear-gradient(45deg,#499bea 0,#1abc9c 100%);background:-o-linear-gradient(45deg,#499bea 0,#1abc9c 100%);background:-ms-linear-gradient(45deg,#499bea 0,#1abc9c 100%);background:linear-gradient(45deg,#499bea 0,#1abc9c 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#499bea',endColorstr='#1abc9c',GradientType=1)}
#button-design .button{display:inline-block;position:relative;border-radius:3px;text-decoration:none;padding:.5em;margin:.5em;font-size:2em;font-weight:700;transition:all .5s;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
#button-design .button:hover{text-shadow:0 0 0 rgba(255,255,255,.75)}
#button-design .button:hover:after{left:100%;top:100%;bottom:100%;right:100%}
#button-design .button:before{content:'';display:block;position:absolute;left:0;top:0;bottom:0;right:0;z-index:-1;border-radius:5px;transition:all .5s}
#button-design .button:after{content:'';display:block;position:absolute;left:2px;top:2px;bottom:2px;right:2px;z-index:-1;border-radius:5px;transition:all .5s;background:#fff}

HTML разметка



CSS оформление

#button-design .b-pink,#button-design .b-pink:before{background:#e748ea;background:-moz-linear-gradient(45deg,#e748ea 0,#4b1abc 100%);background:-webkit-gradient(left bottom,right top,color-stop(0,#e748ea),color-stop(100%,#4b1abc));background:-webkit-linear-gradient(45deg,#e748ea 0,#4b1abc 100%);background:-o-linear-gradient(45deg,#e748ea 0,#4b1abc 100%);background:-ms-linear-gradient(45deg,#e748ea 0,#4b1abc 100%);background:linear-gradient(45deg,#e748ea 0,#4b1abc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e748ea',endColorstr='#4b1abc',GradientType=1)}
#button-design .button{display:inline-block;position:relative;border-radius:3px;text-decoration:none;padding:.5em;margin:.5em;font-size:2em;font-weight:700;transition:all .5s;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
#button-design .button:hover{text-shadow:0 0 0 rgba(255,255,255,.75)}
#button-design .button:hover:after{left:100%;top:100%;bottom:100%;right:100%}
#button-design .button:before{content:'';display:block;position:absolute;left:0;top:0;bottom:0;right:0;z-index:-1;border-radius:5px;transition:all .5s}
#button-design .button:after{content:'';display:block;position:absolute;left:2px;top:2px;bottom:2px;right:2px;z-index:-1;border-radius:5px;transition:all .5s;background:#fff}

HTML разметка



CSS оформление

#button-design .b-red,#button-design .b-red:before{background:#ea6e48;background:-moz-linear-gradient(45deg,#ea6e48 0,#bc1a63 100%);background:-webkit-gradient(left bottom,right top,color-stop(0,#ea6e48),color-stop(100%,#bc1a63));background:-webkit-linear-gradient(45deg,#ea6e48 0,#bc1a63 100%);background:-o-linear-gradient(45deg,#ea6e48 0,#bc1a63 100%);background:-ms-linear-gradient(45deg,#ea6e48 0,#bc1a63 100%);background:linear-gradient(45deg,#ea6e48 0,#bc1a63 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ea6e48',endColorstr='#bc1a63',GradientType=1)}
#button-design .button{display:inline-block;position:relative;border-radius:3px;text-decoration:none;padding:.5em;margin:.5em;font-size:2em;font-weight:700;transition:all .5s;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
#button-design .button:hover{text-shadow:0 0 0 rgba(255,255,255,.75)}
#button-design .button:hover:after{left:100%;top:100%;bottom:100%;right:100%}
#button-design .button:before{content:'';display:block;position:absolute;left:0;top:0;bottom:0;right:0;z-index:-1;border-radius:5px;transition:all .5s}
#button-design .button:after{content:'';display:block;position:absolute;left:2px;top:2px;bottom:2px;right:2px;z-index:-1;border-radius:5px;transition:all .5s;background:#fff}

HTML разметка



CSS оформление

#button-design .b-orange,#button-design .b-orange:before{background:#ffc107;background:-moz-linear-gradient(45deg,#ffc107 0,#ff5722 100%);background:-webkit-gradient(left bottom,right top,color-stop(0,#ffc107),color-stop(100%,#ff5722));background:-webkit-linear-gradient(45deg,#ffc107 0,#ff5722 100%);background:-o-linear-gradient(45deg,#ffc107 0,#ff5722 100%);background:-ms-linear-gradient(45deg,#ffc107 0,#ff5722 100%);background:linear-gradient(45deg,#ffc107 0,#ff5722 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc107',endColorstr='#ff5722',GradientType=1)}
#button-design .button{display:inline-block;position:relative;border-radius:3px;text-decoration:none;padding:.5em;margin:.5em;font-size:2em;font-weight:700;transition:all .5s;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
#button-design .button:hover{text-shadow:0 0 0 rgba(255,255,255,.75)}
#button-design .button:hover:after{left:100%;top:100%;bottom:100%;right:100%}
#button-design .button:before{content:'';display:block;position:absolute;left:0;top:0;bottom:0;right:0;z-index:-1;border-radius:5px;transition:all .5s}
#button-design .button:after{content:'';display:block;position:absolute;left:2px;top:2px;bottom:2px;right:2px;z-index:-1;border-radius:5px;transition:all .5s;background:#fff}

HTML разметка



CSS оформление

#button-design .b-blue,#button-design .b-blue:before{background:#0576ff;background:-moz-linear-gradient(45deg,#0576ff 0,#24f8ff 100%);background:-webkit-gradient(left bottom,right top,color-stop(0,#0576ff),color-stop(100%,#24f8ff));background:-webkit-linear-gradient(45deg,#0576ff 0,#24f8ff 100%);background:-o-linear-gradient(45deg,#0576ff 0,#24f8ff 100%);background:-ms-linear-gradient(45deg,#0576ff 0,#24f8ff 100%);background:linear-gradient(45deg,#0576ff 0,#24f8ff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0576ff',endColorstr='#24f8ff',GradientType=1)}
#button-design .button{display:inline-block;position:relative;border-radius:3px;text-decoration:none;padding:.5em;margin:.5em;font-size:2em;font-weight:700;transition:all .5s;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
#button-design .button:hover{text-shadow:0 0 0 rgba(255,255,255,.75)}
#button-design .button:hover:after{left:100%;top:100%;bottom:100%;right:100%}
#button-design .button:before{content:'';display:block;position:absolute;left:0;top:0;bottom:0;right:0;z-index:-1;border-radius:5px;transition:all .5s}
#button-design .button:after{content:'';display:block;position:absolute;left:2px;top:2px;bottom:2px;right:2px;z-index:-1;border-radius:5px;transition:all .5s;background:#fff}

HTML разметка



CSS оформление

#button-design .b-green,#button-design .b-green:before{background:#499bea;background:-moz-linear-gradient(45deg,#499bea 0,#1abc9c 100%);background:-webkit-gradient(left bottom,right top,color-stop(0,#499bea),color-stop(100%,#1abc9c));background:-webkit-linear-gradient(45deg,#499bea 0,#1abc9c 100%);background:-o-linear-gradient(45deg,#499bea 0,#1abc9c 100%);background:-ms-linear-gradient(45deg,#499bea 0,#1abc9c 100%);background:linear-gradient(45deg,#499bea 0,#1abc9c 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#499bea',endColorstr='#1abc9c',GradientType=1)}
#button-design .button2{display:inline-block;font-size:2em;margin:.5em;padding:.5em;border-radius:5px;transition:all .5s;filter:hue-rotate(0);color:#FFF;text-decoration:none}
#button-design .rot-135:hover{filter:hue-rotate(135deg)}

HTML разметка



CSS оформление

#button-design .b-pink,#button-design .b-pink:before{background:#e748ea;background:-moz-linear-gradient(45deg,#e748ea 0,#4b1abc 100%);background:-webkit-gradient(left bottom,right top,color-stop(0,#e748ea),color-stop(100%,#4b1abc));background:-webkit-linear-gradient(45deg,#e748ea 0,#4b1abc 100%);background:-o-linear-gradient(45deg,#e748ea 0,#4b1abc 100%);background:-ms-linear-gradient(45deg,#e748ea 0,#4b1abc 100%);background:linear-gradient(45deg,#e748ea 0,#4b1abc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e748ea',endColorstr='#4b1abc',GradientType=1)}
#button-design .button2{display:inline-block;font-size:2em;margin:.5em;padding:.5em;border-radius:5px;transition:all .5s;filter:hue-rotate(0);color:#FFF;text-decoration:none}
#button-design .rot-135:hover{filter:hue-rotate(135deg)}

HTML разметка



CSS оформление

#button-design .b-red,#button-design .b-red:before{background:#ea6e48;background:-moz-linear-gradient(45deg,#ea6e48 0,#bc1a63 100%);background:-webkit-gradient(left bottom,right top,color-stop(0,#ea6e48),color-stop(100%,#bc1a63));background:-webkit-linear-gradient(45deg,#ea6e48 0,#bc1a63 100%);background:-o-linear-gradient(45deg,#ea6e48 0,#bc1a63 100%);background:-ms-linear-gradient(45deg,#ea6e48 0,#bc1a63 100%);background:linear-gradient(45deg,#ea6e48 0,#bc1a63 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ea6e48',endColorstr='#bc1a63',GradientType=1)}
#button-design .button2{display:inline-block;font-size:2em;margin:.5em;padding:.5em;border-radius:5px;transition:all .5s;filter:hue-rotate(0);color:#FFF;text-decoration:none}
#button-design .rot-135:hover{filter:hue-rotate(135deg)}

HTML разметка



CSS оформление

#button-design .b-orange,#button-design .b-orange:before{background:#ffc107;background:-moz-linear-gradient(45deg,#ffc107 0,#ff5722 100%);background:-webkit-gradient(left bottom,right top,color-stop(0,#ffc107),color-stop(100%,#ff5722));background:-webkit-linear-gradient(45deg,#ffc107 0,#ff5722 100%);background:-o-linear-gradient(45deg,#ffc107 0,#ff5722 100%);background:-ms-linear-gradient(45deg,#ffc107 0,#ff5722 100%);background:linear-gradient(45deg,#ffc107 0,#ff5722 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc107',endColorstr='#ff5722',GradientType=1)}
#button-design .button2{display:inline-block;font-size:2em;margin:.5em;padding:.5em;border-radius:5px;transition:all .5s;filter:hue-rotate(0);color:#FFF;text-decoration:none}
#button-design .rot-135:hover{filter:hue-rotate(135deg)}

HTML разметка



CSS оформление

#button-design .b-blue,#button-design .b-blue:before{background:#0576ff;background:-moz-linear-gradient(45deg,#0576ff 0,#24f8ff 100%);background:-webkit-gradient(left bottom,right top,color-stop(0,#0576ff),color-stop(100%,#24f8ff));background:-webkit-linear-gradient(45deg,#0576ff 0,#24f8ff 100%);background:-o-linear-gradient(45deg,#0576ff 0,#24f8ff 100%);background:-ms-linear-gradient(45deg,#0576ff 0,#24f8ff 100%);background:linear-gradient(45deg,#0576ff 0,#24f8ff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0576ff',endColorstr='#24f8ff',GradientType=1)}
#button-design .button2{display:inline-block;font-size:2em;margin:.5em;padding:.5em;border-radius:5px;transition:all .5s;filter:hue-rotate(0);color:#FFF;text-decoration:none}
#button-design .rot-135:hover{filter:hue-rotate(135deg)}

Cмотрю на свой контент и думаю: стал бы я сам делиться им с друзьями?


Похожие статьи:

Подборка слайдеров для сайта на чистом CSS
Кнопка для сайта в стиле минимализм
3D текст с мультяшным эффектом на CSS
CSS анимация в стиле рентгена
Верстка блоков со стрелочками
Анимированный фон с плавающими облаками
Красивое оформление 404 страницы
Вертикальное hover hide меню для сайта на HTML и CSS
Стилизация Input File
Стилизация checkbox и radio

Внимание! Вот моя лучшая статья! Читать всем!

Как сделать продающую страницу

Комментарии ()

    Вы должны авторизоваться, чтобы оставлять комментарии.

    Вы можете авторизоваться на сайте через:
    YandexVkontakte