En hurtig guide til stylingsknapper ved hjælp af CSS

Knapper er blevet en uundgåelig del af frontend-udviklingen. Derfor er det vigtigt at huske på et par ting, inden du begynder at stylere knapper. Jeg har samlet nogle af måderne til styling af knapper ved hjælp af CSS. Du kan også kombinere de fleste af metoderne for at skabe en ny stil. For at oprette CSS til gradienter kan du bruge //uigradients.com.

En simpel “Kom godt i gang” -knap

.btn {
background: #eb94d0;

/ * for at oprette forløb * /

 background-image: -webkit-linear-gradient(top, #eb94d0, #2079b0); background-image: -moz-linear-gradient(top, #eb94d0, #2079b0); background-image: -ms-linear-gradient(top, #eb94d0, #2079b0); background-image: -o-linear-gradient(top, #eb94d0, #2079b0); background-image: linear-gradient(to bottom, #eb94d0, #2079b0);

/ * for at give den buede kant for btn * /

-webkit-border-radius: 28; -moz-border-radius: 28; border-radius: 28px;
text-shadow: 3px 2px 1px #9daef5; -webkit-box-shadow: 6px 5px 24px #666666; -moz-box-shadow: 6px 5px 24px #666666; box-shadow: 6px 5px 24px #666666;
font-family: Arial; color: #fafafa; font-size: 27px; padding: 19px; text-decoration: none;}

/ * knap på svæver * /

.btn:hover {
 background: #2079b0;
 background-image: -webkit-linear-gradient(top, #2079b0, #eb94d0); background-image: -moz-linear-gradient(top, #2079b0, #eb94d0); background-image: -ms-linear-gradient(top, #2079b0, #eb94d0); background-image: -o-linear-gradient(top, #2079b0, #eb94d0); background-image: linear-gradient(to bottom, #2079b0, #eb94d0);
 text-decoration: none;}

Gennemsigtig baggrundsknap

.btn {

/ * Tekstfarve * /

 color: #0099CC; 

/ * Fjern baggrundsfarve * /

 background: transparent; 

/ * Kanttykkelse, linjestil og farve * /

 border: 2px solid #0099CC;

/ * Tilføjer kurve til kanthjørner * /

 border-radius: 6px; 

/ * Lav bogstaver med store bogstaver * /

 border: none; color: white; padding: 16px 32px; text-align: center; display: inline-block; font-size: 16px; margin: 4px 2px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; cursor: pointer; text-decoration: none; text-transform: uppercase;}.btn1 { background-color: white; color: black; border: 2px solid #008CBA;}

/ * knap på svæver * /

 .btn1:hover { background-color: #008CBA; color: white; }

Knap med CSS-enheder

Du kan finde den komplette liste over CSS-enheder her: //www.w3schools.com/cssref/css_entities.asp

Du kan også bruge HTML-enheder, men de er begrænsede. //www.w3schools.com/html/html_entities.asp

.button { display: inline-block; border-radius: 4px; background-color: #f4511e; border: none; color: #FFFFFF; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px;}
.button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s;}
.button span:after {
content: '\00bb'; /* CSS Entities. To use HTML Entities, use →*/
position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s;}
.button:hover span { padding-right: 25px;}
.button:hover span:after { opacity: 1; right: 0;}

Knap med klikanimation

CSS: (SCSS)

$gray: #bbbbbb;
* { font-family: 'Roboto', sans-serif;}
.container { position: absolute; top:50%; left:50%; margin-left: -65px; margin-top: -20px; width: 130px; height: 40px; text-align: center;}
.btn { color: #0099CC; /* Text color */ background: transparent; /* Remove background color */ border: 2px solid #0099CC; /* Border thickness, line style, and color */ border-radius: 70px; /* Adds curve to border corners */ text-decoration: none; text-transform: uppercase; /* Make letters uppercase */ border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; cursor: pointer;}.btn1 { background-color: white; color: black; border: 2px solid #008CBA;} .btn1:hover { background-color: #008CBA; color: white; }
b { outline:none; height: 40px; text-align: center; width: 130px; border-radius:100px; background: #fff; border: 2px solid #008CBA; color: #008CBA; letter-spacing:1px; text-shadow:0; font:{ size:12px; weight:bold; } cursor: pointer; transition: all 0.25s ease;
&:active { letter-spacing: 2px ; } &:after { content:""; }}.onclic { width: 10px !important; height: 70px !important; border-radius: 50% !important; border-color:$gray; border-width:4px; font-size:0; border-left-color: #008CBA; animation: rotating 2s 0.25s linear infinite; &:hover { color: dodgerblue; background: white; }}.validate { content:""; font-size:16px; color: black; background: dodgerblue; border-radius: 50px; &:after { font-family:'FontAwesome'; content:" done \f00c"; }}
@keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}

Javascript: (JQuery)

$(function() { $("#button").click(function() { $("#button").addClass("onclic", 250, validate); });
function validate() { setTimeout(function() { $("#button").removeClass("onclic"); $("#button").addClass("validate", 450, callback); }, 2250); } function callback() { setTimeout(function() { $("#button").removeClass("validate"); }, 1250); }});

Knap med et billede

.btn {
 background: #92c7eb; background-image: url(“//res.freestockphotos.biz/pictures/15/15107-illustration-of-a-red-close-button-pv.png"); background-size: cover; background-position: center; display: inline-block; border: none; padding: 20px; width: 70px; border-radius: 900px; height: 70px; transition: all 0.5s; cursor: pointer;}.btn:hover{ width: 75px; height: 75px;}

Knap med ikoner

index.html:

TWEET!

style.css:

button{ border: none; border-radius: 50px;}html,body { font-size: 20px; min-height: 100%; overflow: hidden; font-family: "Helvetica Neue", Helvetica, sans-serif; text-align: center;}.text { padding-top: 50px; font-family: "Helvetica Neue", Helvetica, 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}.text:hover{ cursor: pointer; color: #1565C0;}.main { padding: 0px 0px 0px 0px; margin: 0; background-image: url("//someimg"); text-align: center; background-size: 100% !important; background-repeat: no-repeat; width: 900px; height: 700px; }
.icon-button { background-color: white; border-radius: 3.6rem; cursor: pointer; display: inline-block; font-size: 2rem; height: 3.6rem; line-height: 3.6rem; margin: 0 5px; position: relative; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 3.6rem;}
.icon-button span { border-radius: 0; display: block; height: 0; left: 50%; margin: 0; position: absolute; top: 50%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; width: 0;}.icon-button:hover span { width: 3.6rem; height: 3.6rem; border-radius: 3.6rem; margin: -1.8rem;}.twitter span { background-color: #4099ff;}
/* Icons */.icon-button i { background: none; color: white; height: 3.6rem; left: 0; line-height: 3.6rem; position: absolute; top: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; width: 3.6rem; z-index: 10;}.icon-button .icon-twitter { color: #4099ff;}
.icon-button:hover .icon-twitter { color: white;}

Konklusion

I denne vejledning har du lært, hvordan du tilpasser knapper ved hjælp af CSS og lidt Javascript, hvis du har brug for funktionen “efter klik”. Du kan også bruge CSS3ButtonGenerator til at generere enkle knapper. Du er velkommen til at pinge mig, hvis du har spørgsmål.

Hvis du kunne lide denne artikel, og hvis det hjalp dig, skal du give nogle klapper! ?