Hallo liebes Forum,
ich bin auf diese Seite gestoßen: <a href="https://webdeasy.de/en/top-css-buttons-en/">https://webdeasy.de/en/top-css-buttons-en/</a>
Button
#4 Icon Buttons
finde ich absolut Klasse!
Ich habe es mittlerweile hinbekommen, dass das Icon RECHTS ist:
Ich bin aber total verzweifelt: Ich möchte eine Variation des Buttons so haben, dass das ICON rechts UND links von der Schrift steht.
Könnt ihr mir da helfen?
Ich bekomme es einfach nicht hin ;(
LG und frohes neues Jahr noch.
Code
<doctype html>
<html>
<head>
<style>
.btn {
border: none;
font-family: 'Lato';
font-size: inherit;
color: inherit;
cursor: pointer;
padding: 25px 80px;
margin: 15px 30px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
padding: 25px 120px 25px 120px;
position: relative;
transition: all 0.3s;
background: #3498db;
color: #fff;
}
.btn:before ,.btn:after{
font-family: 'FontAwesome';
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
position: relative;
-webkit-font-smoothing: antialiased;
background: rgba(0,0,0,0.15);
position: absolute;
height: 100%;
top: 0;
line-height: 3;
font-size: 140%;
width: 60px;
content: "\f05a";
}
.btn-1:hover {
background: #2980b9;
}
.btn-1:active {
background: #2980b9;
top: 2px;
}
.btn-1:before{
left: 0;
}
.btn-1:after {
right: 0;
}
</style>
<link href="/css_webseite/4.7.0.font-awesome.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>
<body>
<button class="btn btn-1 btn-sep icon-info">Button</button>
</body>
</html>