CERN Accelerating science

Close menu

Call to action button

Components - CONTENT

A call to action is a button that allows the user to take a certain action, such as ‘register’ or ‘add event to my calendar’. In case of a white background, the call to action is white with a blue outline and blue text. In case of a dark background, the call to action is white with blue text. 

Usage

CERN provided Drupal 8 sites:

  • Install and enable the Call to action button module and all its dependencies under Extend
  • After installing you can add Call to action buttons on all content types which use Paragraph components like the Landing Page
  • To create such a button just choose Call to action button from the Paragraph chooser (if there is one) and define your properties
  • You can define properties like the displayed text, the URL to which the link leads, the alignment, the used colors and whether the button should contain an icon
  • After defining the properties just click on save and your button is done

Other:

  • Just include one of the variant's HTML snippets
  • If you're experienced with HTML and CSS you even can customise it further!

Call to action COMPONENT

<div class="component-call-to-action left">
<div class="component-call-to-action__wrapper" style="background:rgba(10,108,204,1)">
<a href="/events/webcasts/black-holes-brains-neural-networks-area-law-entropy" title="Black Holes as Brains">
<span style="color:#FFFFFF">Black Holes as Brains</span>
</a>
</div>
</div>
Show more code
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Source+Sans+Pro:400,600,700");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
/* ****************************************** call to actions with icon */
.component-call-to-action#on_icon.center {
text-align: center; }

.component-call-to-action#on_icon.left {
text-align: left; }

.component-call-to-action#on_icon.right {
text-align: right; }

.component-call-to-action#on_icon .component-button-background {
padding: 11px 30px;
display: inline-block;
line-height: 18px;
border-radius: 5px;
text-align: center; }

.component-call-to-action#on_icon .button-white {
border: 0;
border-radius: 5px;
background: #ffffff;
padding: 15px;
color: #0855a0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
font-size: 1.6rem;
cursor: pointer;
width: 200px;
text-align: center;
display: block; }

.component-call-to-action#on_icon .button-border {
border: 2px solid #0855a0;
border-radius: 5px;
background: #ffffff;
padding: 15px;
color: #0855a0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
font-size: 1.6rem;
width: 217px;
cursor: pointer; }

.component-call-to-action#on_icon .component_icon_color_orange {
background: transparent;
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
padding: 15px;
cursor: pointer; }
.component-call-to-action#on_icon .component_icon_color_orange:after {
background: url(../images/arrow-orange.png) center right no-repeat;
content: '';
width: 8px;
height: 20px;
display: inline-block;
margin-left: 8px;
position: relative;
top: 5px; }

.component-call-to-action#on_icon .component_icon_color_blue {
background: transparent;
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
padding: 15px;
cursor: pointer; }
.component-call-to-action#on_icon .component_icon_color_blue:after {
background: url(../images/arrow-blue.png) center right no-repeat;
content: '';
width: 8px;
height: 20px;
display: inline-block;
margin-left: 8px;
position: relative;
top: 5px; }

.component-call-to-action#on_icon .component_icon_color_black {
background: transparent;
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
padding: 15px;
cursor: pointer; }
.component-call-to-action#on_icon .component_icon_color_black:after {
background: url(../images/arrow-black.png) center right no-repeat;
content: '';
width: 8px;
height: 20px;
display: inline-block;
margin-left: 8px;
position: relative;
top: 5px; }

.component-call-to-action#on_icon .component_icon_color_white {
background: transparent;
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
padding: 15px;
cursor: pointer; }
.component-call-to-action#on_icon .component_icon_color_white:after {
background: url(../images/arrow-white.png) center right no-repeat;
content: '';
width: 8px;
height: 20px;
display: inline-block;
margin-left: 8px;
position: relative;
top: 5px; }

/* ****************************************** call to actions without icon */
.component-call-to-action.center {
text-align: center; }

.component-call-to-action.left {
text-align: left; }
.component-call-to-action.left .component-button-background {
padding: 11px 30px;
display: inline-block;
line-height: 18px;
border-radius: 5px;
text-align: center; }

.component-call-to-action.right {
text-align: right; }

.component-call-to-action a {
background: transparent;
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 18px;
padding: 15px;
cursor: pointer; }
.component-call-to-action a:hover {
text-decoration: none;
border-bottom: 0; }
Show more code
The zip file contains the orginal SCSS files

Just paste the provided HTML code in your site and adjust the text, color and alignment settings

Background and text color variant

Call to action COMPONENT

<div class="component-call-to-action center" id="on_icon">
<div style="display: inline-block;padding: 11px 30px;border-radius:5px;background:rgba(8,85,160,1)" id="call-action" class="component-button-background">
<a href="#" title="See more" class="component_icon_color_">
<span id="call-action" style="color:#FFFFFF" class="component-button-background">See more</span>
</a>
</div>
</div>
<br />

<div class="component-call-to-action center" id="on_icon">
<div style="display: inline-block;padding: 11px 30px;border-radius:5px;background:rgb(221, 224, 172)" id="call-action" class="component-button-background">
<a href="#" title="See more" class="component_icon_color_">
<span id="call-action" style="color:#000000" class="component-button-background">See more</span>
</a>
</div>
</div>
<br />

<div class="component-call-to-action center" id="on_icon">
<div style="display: inline-block;padding: 11px 30px;border-radius:5px;background:rgb(197, 30, 24)" id="call-action" class="component-button-background">
<a href="#" title="See more" class="component_icon_color_">
<span id="call-action" style="color:#FFFFFF" class="component-button-background">See more</span>
</a>
</div>
</div>
Show more code
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Source+Sans+Pro:400,600,700");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
/* ****************************************** call to actions with icon */
.component-call-to-action#on_icon.center {
text-align: center; }

.component-call-to-action#on_icon.left {
text-align: left; }

.component-call-to-action#on_icon.right {
text-align: right; }

.component-call-to-action#on_icon .component-button-background {
padding: 11px 30px;
display: inline-block;
line-height: 18px;
border-radius: 5px;
text-align: center; }

.component-call-to-action#on_icon .button-white {
border: 0;
border-radius: 5px;
background: #ffffff;
padding: 15px;
color: #0855a0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
font-size: 1.6rem;
cursor: pointer;
width: 200px;
text-align: center;
display: block; }

.component-call-to-action#on_icon .button-border {
border: 2px solid #0855a0;
border-radius: 5px;
background: #ffffff;
padding: 15px;
color: #0855a0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
font-size: 1.6rem;
width: 217px;
cursor: pointer; }

.component-call-to-action#on_icon .component_icon_color_orange {
background: transparent;
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
padding: 15px;
cursor: pointer; }
.component-call-to-action#on_icon .component_icon_color_orange:after {
background: url(../images/arrow-orange.png) center right no-repeat;
content: '';
width: 8px;
height: 20px;
display: inline-block;
margin-left: 8px;
position: relative;
top: 5px; }

.component-call-to-action#on_icon .component_icon_color_blue {
background: transparent;
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
padding: 15px;
cursor: pointer; }
.component-call-to-action#on_icon .component_icon_color_blue:after {
background: url(../images/arrow-blue.png) center right no-repeat;
content: '';
width: 8px;
height: 20px;
display: inline-block;
margin-left: 8px;
position: relative;
top: 5px; }

.component-call-to-action#on_icon .component_icon_color_black {
background: transparent;
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
padding: 15px;
cursor: pointer; }
.component-call-to-action#on_icon .component_icon_color_black:after {
background: url(../images/arrow-black.png) center right no-repeat;
content: '';
width: 8px;
height: 20px;
display: inline-block;
margin-left: 8px;
position: relative;
top: 5px; }

.component-call-to-action#on_icon .component_icon_color_white {
background: transparent;
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
padding: 15px;
cursor: pointer; }
.component-call-to-action#on_icon .component_icon_color_white:after {
background: url(../images/arrow-white.png) center right no-repeat;
content: '';
width: 8px;
height: 20px;
display: inline-block;
margin-left: 8px;
position: relative;
top: 5px; }

/* ****************************************** call to actions without icon */
.component-call-to-action.center {
text-align: center; }

.component-call-to-action.left {
text-align: left; }
.component-call-to-action.left .component-button-background {
padding: 11px 30px;
display: inline-block;
line-height: 18px;
border-radius: 5px;
text-align: center; }

.component-call-to-action.right {
text-align: right; }

.component-call-to-action a {
background: transparent;
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 18px;
padding: 15px;
cursor: pointer; }
.component-call-to-action a:hover {
text-decoration: none;
border-bottom: 0; }
Show more code
The zip file contains the orginal SCSS files

You just need to change the background color on the html code:

<div style="display: inline-block;padding: 11px 30px;border-radius:5px;background:rgba(8,85,160,1)" id="call-action" class="component-button-background">

<div style="display: inline-block;padding: 11px 30px;border-radius:5px;background:rgb(221, 224, 172)" id="call-action" class="component-button-background">

<div style="display: inline-block;padding: 11px 30px;border-radius:5px;background:rgb(197, 30, 24)" id="call-action" class="component-button-background">

Icon variant

Call to action COMPONENT

<div class="component-call-to-action center" id="on_icon">
<div style="display: inline-block;padding: 11px 30px;border-radius:5px;background:rgb(8, 85, 160)" id="call-action" class="component-button-background">
<a href="#" title="See more" class="component_icon_color_white">
<span id="call-action" style="color:#FFFFFF" class="component-button-background">See more</span>
</a>
</div>
</div>
<br />

<div class="component-call-to-action center" id="on_icon">
<a href="#" title="See more" class="component_icon_color_orange">
<span data-quickedit-entity-id="paragraph/78" id="call-action" style="color:#F2A530" data-quickedit-entity-instance-id="0">See more</span>
</a>
</div>
Show more code
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Source+Sans+Pro:400,600,700");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
/* ****************************************** call to actions with icon */
.component-call-to-action#on_icon.center {
text-align: center; }

.component-call-to-action#on_icon.left {
text-align: left; }

.component-call-to-action#on_icon.right {
text-align: right; }

.component-call-to-action#on_icon .component-button-background {
padding: 11px 30px;
display: inline-block;
line-height: 18px;
border-radius: 5px;
text-align: center; }

.component-call-to-action#on_icon .button-white {
border: 0;
border-radius: 5px;
background: #ffffff;
padding: 15px;
color: #0855a0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
font-size: 1.6rem;
cursor: pointer;
width: 200px;
text-align: center;
display: block; }

.component-call-to-action#on_icon .button-border {
border: 2px solid #0855a0;
border-radius: 5px;
background: #ffffff;
padding: 15px;
color: #0855a0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
font-size: 1.6rem;
width: 217px;
cursor: pointer; }

.component-call-to-action#on_icon .component_icon_color_orange {
background: transparent;
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
padding: 15px;
cursor: pointer; }
.component-call-to-action#on_icon .component_icon_color_orange:after {
background: url(../images/arrow-orange.png) center right no-repeat;
content: '';
width: 8px;
height: 20px;
display: inline-block;
margin-left: 8px;
position: relative;
top: 5px; }

.component-call-to-action#on_icon .component_icon_color_blue {
background: transparent;
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
padding: 15px;
cursor: pointer; }
.component-call-to-action#on_icon .component_icon_color_blue:after {
background: url(../images/arrow-blue.png) center right no-repeat;
content: '';
width: 8px;
height: 20px;
display: inline-block;
margin-left: 8px;
position: relative;
top: 5px; }

.component-call-to-action#on_icon .component_icon_color_black {
background: transparent;
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
padding: 15px;
cursor: pointer; }
.component-call-to-action#on_icon .component_icon_color_black:after {
background: url(../images/arrow-black.png) center right no-repeat;
content: '';
width: 8px;
height: 20px;
display: inline-block;
margin-left: 8px;
position: relative;
top: 5px; }

.component-call-to-action#on_icon .component_icon_color_white {
background: transparent;
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
padding: 15px;
cursor: pointer; }
.component-call-to-action#on_icon .component_icon_color_white:after {
background: url(../images/arrow-white.png) center right no-repeat;
content: '';
width: 8px;
height: 20px;
display: inline-block;
margin-left: 8px;
position: relative;
top: 5px; }

/* ****************************************** call to actions without icon */
.component-call-to-action.center {
text-align: center; }

.component-call-to-action.left {
text-align: left; }
.component-call-to-action.left .component-button-background {
padding: 11px 30px;
display: inline-block;
line-height: 18px;
border-radius: 5px;
text-align: center; }

.component-call-to-action.right {
text-align: right; }

.component-call-to-action a {
background: transparent;
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 18px;
padding: 15px;
cursor: pointer; }
.component-call-to-action a:hover {
text-decoration: none;
border-bottom: 0; }
Show more code
The zip file contains the orginal SCSS files

You just need to change the class "component_icon_color_white" in the html code.

The options are:
    - component_icon_color_white
    - component_icon_color_blue
    - component_icon_color_orange
    - component_icon_color_black

Position variant

Call to action COMPONENT

<div class="component-call-to-action left">
<div style="display: inline-block;padding: 11px 30px;border-radius:5px;background:rgba(8,85,160,1)" data-quickedit-entity-id="paragraph/78" id="call-action" class="component-button-background" data-quickedit-entity-instance-id="0">
<a href="#" title="See more" class="component_icon_color_">
<span data-quickedit-entity-id="paragraph/78" id="call-action" style="color:#FFFFFF" class="component-button-background" data-quickedit-entity-instance-id="1">See more</span>
</a>
</div>
</div>

<div class="component-call-to-action center">
<div style="display: inline-block;padding: 11px 30px;border-radius:5px;background:rgba(8,85,160,1)" data-quickedit-entity-id="paragraph/78" id="call-action" class="component-button-background" data-quickedit-entity-instance-id="0">
<a href="#" title="See more" class="component_icon_color_">
<span data-quickedit-entity-id="paragraph/78" id="call-action" style="color:#FFFFFF" class="component-button-background" data-quickedit-entity-instance-id="1">See more</span>
</a>
</div>
</div>

<div class="component-call-to-action right">
<div style="display: inline-block;padding: 11px 30px;border-radius:5px;background:rgba(8,85,160,1)" data-quickedit-entity-id="paragraph/78" id="call-action" class="component-button-background" data-quickedit-entity-instance-id="0">
<a href="http://www.google.com" title="See more" class="component_icon_color_">
<span data-quickedit-entity-id="paragraph/78" id="call-action" style="color:#FFFFFF" class="component-button-background" data-quickedit-entity-instance-id="1">See more</span>
</a>
</div>
</div>
Show more code
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Source+Sans+Pro:400,600,700");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
/* ****************************************** call to actions with icon */
.component-call-to-action#on_icon.center {
text-align: center; }

.component-call-to-action#on_icon.left {
text-align: left; }

.component-call-to-action#on_icon.right {
text-align: right; }

.component-call-to-action#on_icon .component-button-background {
padding: 11px 30px;
display: inline-block;
line-height: 18px;
border-radius: 5px;
text-align: center; }

.component-call-to-action#on_icon .button-white {
border: 0;
border-radius: 5px;
background: #ffffff;
padding: 15px;
color: #0855a0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
font-size: 1.6rem;
cursor: pointer;
width: 200px;
text-align: center;
display: block; }

.component-call-to-action#on_icon .button-border {
border: 2px solid #0855a0;
border-radius: 5px;
background: #ffffff;
padding: 15px;
color: #0855a0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
font-size: 1.6rem;
width: 217px;
cursor: pointer; }

.component-call-to-action#on_icon .component_icon_color_orange {
background: transparent;
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
padding: 15px;
cursor: pointer; }
.component-call-to-action#on_icon .component_icon_color_orange:after {
background: url(../images/arrow-orange.png) center right no-repeat;
content: '';
width: 8px;
height: 20px;
display: inline-block;
margin-left: 8px;
position: relative;
top: 5px; }

.component-call-to-action#on_icon .component_icon_color_blue {
background: transparent;
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
padding: 15px;
cursor: pointer; }
.component-call-to-action#on_icon .component_icon_color_blue:after {
background: url(../images/arrow-blue.png) center right no-repeat;
content: '';
width: 8px;
height: 20px;
display: inline-block;
margin-left: 8px;
position: relative;
top: 5px; }

.component-call-to-action#on_icon .component_icon_color_black {
background: transparent;
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
padding: 15px;
cursor: pointer; }
.component-call-to-action#on_icon .component_icon_color_black:after {
background: url(../images/arrow-black.png) center right no-repeat;
content: '';
width: 8px;
height: 20px;
display: inline-block;
margin-left: 8px;
position: relative;
top: 5px; }

.component-call-to-action#on_icon .component_icon_color_white {
background: transparent;
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
padding: 15px;
cursor: pointer; }
.component-call-to-action#on_icon .component_icon_color_white:after {
background: url(../images/arrow-white.png) center right no-repeat;
content: '';
width: 8px;
height: 20px;
display: inline-block;
margin-left: 8px;
position: relative;
top: 5px; }

/* ****************************************** call to actions without icon */
.component-call-to-action.center {
text-align: center; }

.component-call-to-action.left {
text-align: left; }
.component-call-to-action.left .component-button-background {
padding: 11px 30px;
display: inline-block;
line-height: 18px;
border-radius: 5px;
text-align: center; }

.component-call-to-action.right {
text-align: right; }

.component-call-to-action a {
background: transparent;
border: none;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 18px;
padding: 15px;
cursor: pointer; }
.component-call-to-action a:hover {
text-decoration: none;
border-bottom: 0; }
Show more code
The zip file contains the orginal SCSS files

You just need to change the class to align the Call to action button to the left, right or center.

The options are:

     <div class="component-call-to-action left">
     <div class="component-call-to-action right">
     <div class="component-call-to-action center">