HTML разметка
<div id="button-design">
<a href="#" class="button b-green">Скачать пустую зеленую кнопку</a>
</div>
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 разметка
<div id="button-design">
<a href="https://obninsksite.ru/assets/theme/upload/pink-b.rar" class="button b-pink">Скачать пустую розовую кнопку с градиентом</a>
</div>
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 разметка
<div id="button-design">
<a href="#" class="button b-red">Скачать пустую красную кнопку с градиентом</a>
</div>
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 разметка
<div id="button-design">
<a href="#" class="button b-orange">Скачать пустую оранжевую кнопку с градиентом</a>
</div>
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 разметка
<div id="button-design">
<a href="#" class="button b-blue">Скачать пустую красную кнопку с градиентом</a>
</div>
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 разметка
<div id="button-design">
<a href="#" class="button2 b-green rot-135">Скачать зеленую кнопку с градиентом</a>
</div>
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 разметка
<div id="button-design">
<a href="#" class="button2 b-pink rot-135">Скачать розовую кнопку с градиентом</a>
</div>
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 разметка
<div id="button-design">
<a href="#" class="button2 b-red rot-135">Скачать красную кнопку с градиентом</a>
</div>
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 разметка
<div id="button-design">
<a href="#" class="button2 b-orange rot-135">Скачать оранжевую кнопку с градиентом</a>
</div>
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 разметка
<div id="button-design">
<a href="#" class="button2 b-blue rot-135">Скачать голубую кнопку с градиентом</a>
</div>
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)}